/* ==========================================================================
   CSS: TAB PANELS / SHARED CATALOG LAYOUT
   ========================================================================== */

.tabs-shell {
  --tabs-strip-bg: rgba(132, 170, 251, 0.2);
  --tabs-strip-separator: rgba(255, 255, 255, 0.22);
  --tabs-hover-bg: rgba(53, 53, 60, 0.55);
  --tabs-pane-bg: rgb(47 46 50);
  --pseudo-hover: rgba(53, 53, 60, 1);
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  margin-top: -1px;
}

.tabs-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0;
  flex: 0 0 auto;
  min-height: 50px;
  padding: 0;
  overflow: visible;
  border-radius: 12px 12px 0 0;
}

.tabs-btn {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 118px;
  max-width: 190px;
  height: 44px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
  isolation: isolate;
  text-decoration: none !important;
}

.tabs-btn + .tabs-btn {
  margin-left: -1px;
}

.tabs-btn::before,
.tabs-btn::after {
  content: "";
  position: absolute;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--tabs-strip-separator);
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 1;
}

.tabs-btn::before {
  left: 0;
}

.tabs-btn::after {
  right: 0;
}

.tabs-btn:first-child::before,
.tabs-btn:last-child::after,
.tabs-btn:hover::before,
.tabs-btn:hover::after,
.tabs-btn.is-active::before,
.tabs-btn.is-active::after,
.tabs-btn:hover + .tabs-btn::before,
.tabs-btn.is-active + .tabs-btn::before,
.tabs-btn:has(+ .tabs-btn:hover)::after,
.tabs-btn:has(+ .tabs-btn.is-active)::after {
  opacity: 0;
}

.tabs-btn:focus-visible {
  outline: none;
}

.tabs-btn-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 18px;
  border-radius: 12px 12px 0 0;
  color: var(--text);
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.tabs-btn-inner::before,
.tabs-btn-inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tabs-btn-inner::before {
  left: -12px;
}

.tabs-btn-inner::after {
  right: -12px;
}

.tabs-btn-label {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabs-btn:hover .tabs-btn-inner {
  background: var(--pseudo-hover);
}

.tabs-btn:hover .tabs-btn-inner::before,
.tabs-btn:hover .tabs-btn-inner::after {
  opacity: 1;
}

.tabs-btn:hover .tabs-btn-inner::before {
  background: radial-gradient(circle at 0 0, transparent 12px, var(--pseudo-hover) 12.5px);
}

.tabs-btn:hover .tabs-btn-inner::after {
  background: radial-gradient(circle at 100% 0, transparent 12px, var(--pseudo-hover) 12.5px);
}
    
.tabs-btn.is-active {
  z-index: 5;
}

.tabs-btn.is-active .tabs-btn-inner {
  transform: translateY(1px);
  color: var(--text);
  background: var(--tabs-pane-bg);
}

.tabs-btn.is-active .tabs-btn-inner::before,
.tabs-btn.is-active .tabs-btn-inner::after {
  opacity: 1;
}

.tabs-btn.is-active .tabs-btn-inner::before {
  background: radial-gradient(circle at 0 0, transparent 12px, var(--tabs-pane-bg) 12.5px);
}

.tabs-btn.is-active .tabs-btn-inner::after {
  background: radial-gradient(circle at 100% 0, transparent 12px, var(--tabs-pane-bg) 12.5px);
}

    .tabs-bar-top .tabs-btn.is-active .tabs-btn-label {
  position: relative;
}

.tabs-bar-top .tabs-btn.is-active .tabs-btn-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 42px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(190,194,202,0) 0%,
    rgba(190,194,202,0.12) 18%,
    rgba(150,150,150,1) 50%,
    rgba(190,194,202,0.12) 82%,
    rgba(190,194,202,0) 100%
  );
  box-shadow: none;
  pointer-events: none;
}

.tabs-bar-top .tabs-btn.is-active .tabs-btn-label::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6.5px;
  transform: translate(-50%, -0.5px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(150,150,150);
  box-shadow: none;
  pointer-events: none;
}
    
@property --tabs-top-gradient-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.tabs-bar-top .tabs-btn-inner {
  --tabs-top-gradient-opacity: 0;
  height: 100%;
  padding: 0 18px var(--top-tabs-bridge);
  align-items: flex-start;
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(53, 53, 60, var(--tabs-top-gradient-opacity)) 0%,
    rgba(53, 53, 60, var(--tabs-top-gradient-opacity)) 42%,
    rgba(47, 46, 50, var(--tabs-top-gradient-opacity)) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.2s ease,
    --tabs-top-gradient-opacity 0.18s ease;
}

.tabs-bar-top .tabs-btn:hover .tabs-btn-inner {
  background-color: var(--pseudo-hover);
  background-image: linear-gradient(
    to bottom,
    rgba(53, 53, 60, 1) 0%,
    rgba(53, 53, 60, 1) 42%,
    rgba(47, 46, 50, 1) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  --tabs-top-gradient-opacity: 1;
  transition:
    background-color 0s,
    color 0.18s ease,
    transform 0.2s ease,
    --tabs-top-gradient-opacity 0s;
}

.tabs-bar-top .tabs-btn.is-active .tabs-btn-inner,
.tabs-bar-top .tabs-btn.is-active:hover .tabs-btn-inner {
  background-color: var(--tabs-pane-bg);
  background-image: linear-gradient(
    to bottom,
    rgba(53, 53, 60, var(--tabs-top-gradient-opacity)) 0%,
    rgba(53, 53, 60, var(--tabs-top-gradient-opacity)) 42%,
    rgba(47, 46, 50, var(--tabs-top-gradient-opacity)) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  --tabs-top-gradient-opacity: 0;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.2s ease,
    --tabs-top-gradient-opacity 0.18s ease;
}

.tabs-bar-top .tabs-btn:hover .tabs-btn-inner::before,
.tabs-bar-top .tabs-btn.is-active .tabs-btn-inner::before,
.tabs-bar-top .tabs-btn.is-active:hover .tabs-btn-inner::before {
  background: radial-gradient(circle at 0 0, transparent 12px, var(--tabs-pane-bg) 12.5px);
}

.tabs-bar-top .tabs-btn:hover .tabs-btn-inner::after,
.tabs-bar-top .tabs-btn.is-active .tabs-btn-inner::after,
.tabs-bar-top .tabs-btn.is-active:hover .tabs-btn-inner::after {
  background: radial-gradient(circle at 100% 0, transparent 12px, var(--tabs-pane-bg) 12.5px);
}