@use 'backend' as *;

/* TAB */
// TOP
#{c(tab top)} {
  #{c(tab item)} {
    --selected-tab-item-color: var(--hsl-hover-color);
    &#{c(tab selected)} {
      --selected-tab-item-color: var(--hsl-main-color);
      color: var(--interactive-active);
    }
  }
}

// PILL
:is(#{c(tab topPill)}, #{c(tab side)}) {
  #{c(tab themed)} {
    &#{c(tab item)} {
      &:hover:not(#{c(tab disabled)}) {
        background-color: cv('shading.hover');
      }
      &#{c(tab selected)} {
        background-color: cv('color.main');
        &:hover:not(#{c(tab disabled)}) {
          background-color: cv('color.main');
        }
      }
    }
  }
}


// SIDE TAB HEADER
// mainly in settings
#{c(tab header)} {
  color: cv('color.main');
  display: flex;
  align-items: center;
  justify-content: center;
  &::before {
    content: '';
    height: 2px;
    flex-grow: 1;
    background: linear-gradient(to left, cv('color.main') 50%, transparent);
    margin-right: 5px;
  }
  &::after {
    content: '';
    height: 2px;
    flex-grow: 1;
    background: linear-gradient(to right, cv('color.main') 50%, transparent);
    margin-left: 5px;
  }
}
