/* View Switcher Component Styles */

.browse-cards-view-switcher {
  display: none;
}

.browse-cards-view-switcher .browse-card-view-btn {
  margin: 0;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #000000e6;
  background: var(--spectrum-gray-75) 0% 0% no-repeat padding-box;
  color: var(--spectrum-gray-800);
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  padding: 7px 12px 7px 10px;
}

.browse-cards-view-switcher .browse-card-view-btn .icon {
  width: 18px;
  height: 18px;
  display: none;
}

.browse-card-view-btn.active .icon-grid-white,
.browse-card-view-btn:not(.active) .icon-grid-black,
.browse-card-view-btn.active .icon-list-view-white,
.browse-card-view-btn:not(.active) .icon-list-view-black {
  display: inline-block;
}

.browse-cards-view-switcher .browse-card-view-btn.active {
  background: var(--spectrum-gray-900) 0% 0% no-repeat padding-box;
  opacity: 0.9;
  border: 1px solid var(--spectrum-gray-400);
  color: var(--spectrum-gray-50);
}

@media only screen and (min-width: 900px) {
  .browse-cards-view-switcher {
    display: flex;
    gap: 8px;
    align-self: flex-end;
  }
}