@use '../abstract' as *;

.tabs {
  --p-tabs-text-color:            var(--p-tabs-text-color-default);
  --p-tabs-text-color-default:    var(--color-neutral-50);
  --p-tabs-text-color-hover:      var(--color-neutral-80);
  --p-tabs-text-color-active:     var(--color-neutral-80);
  --p-tabs-text-color-selected:   var(--color-neutral-80);

  --p-tabs-bg-color:              var(--p-tabs-bg-defalut);
  --p-tabs-bg-defalut:            var(--transparent);
  --p-tabs-bg-color-hover:        var(--color-neutral-10);

  --p-tabs-outline-color:          var(--p-tabs-outline-color-default);
  --p-tabs-outline-color-default:  var(--transparent);
  --p-tabs-outline-color-focus:    var(--color-neutral-1000) / 0.16;

  --p-tabs-border-color:          var(--p-tabs-border-color-default);
  --p-tabs-border-color-default:  var(--transparent);
  --p-tabs-border-color-selected: var(--color-neutral-80);

  --tabs-shadow-color:       var(--color-neutral-0);
  --tabs-button-arrow-color: var(--color-neutral-80);

  position:relative;

  &-button {
    position:relative; display:flex; align-items:center;
    padding-inline:pxToRem(4); padding-block:pxToRem(7);
    user-select:none; border-radius:pxToRem(10);

    color:hsl(var(--p-tabs-text-color));
    background-color:hsl(var(--p-tabs-bg-color)); background-clip:padding-box;
    border:solid pxToRem(4) hsl(var(--p-tabs-outline-color));


    .text {
      display:flex; align-items:center; padding-inline:pxToRem(12); inline-size:100%;
    }
    &::before {
      content:""; display:block; block-size:pxToRem(1); background-color:transparent;
      position:absolute; inset-inline:0; inset-block-end:pxToRem(-4);
      border-radius:var(--border-radius-xsmall);
    }
    &::after {
      content:""; display:block; border-radius:var(--border-radius-small);
    }
    &:where(:hover, &:focus) {
      box-shadow: none;
    }
    &:where(:hover):not(#{$disabled}) {
      --p-tabs-text-color:    var(--p-tabs-text-color-hover);
      --p-tabs-bg-color:      var(--p-tabs-bg-color-hover);
    }
    &:where(:focus-visible):not(#{$disabled}) {
      --p-tabs-outline-color: var(--p-tabs-outline-color-focus);
    }
    &:where(:active):not(#{$disabled}) {
      --p-tabs-text-color:    var(--p-tabs-text-color-active);
    }
    &:where(#{$disabled}) {
      opacity: 0.4;
    }
    &:is(.is-selected) {
      --p-tabs-text-color:    var(--p-tabs-text-color-selected);
      &::before{ background-color:hsl(var(--p-tabs-border-color-selected)); }
    }
  }

  &-list {
    display:flex; gap:pxToRem(16); overflow:auto; margin-block-end:pxToRem(-1);
    /* remove Scroll */
    -ms-overflow-style:none;/* IE and Edge */ scrollbar-width:none;/* Firefox */
    &::-webkit-scrollbar { display:none; } /* Webkit */
  }
  &-item { }
  &-button-scroll {
    position:absolute; z-index:3; inset-block:0;
    display:flex; align-items:center; inline-size:pxToRem(80); block-size:100%; padding-block-end:pxToRem(5); opacity:0.4; transition:var(--transition);
    color:hsl(var(--tabs-button-arrow-color)); font-size:var(--font-size-3);
    > * { margin-inline:-3px; transform:scaleX(var(--transform-direction)); }
    &:where(:hover, :focus) { opacity:1; }
    &.is-start  {
      inset-inline-start:0;
      background:linear-gradient(to right, hsl(var(--tabs-shadow-color)) 0%, hsl(var(--tabs-shadow-color) / 0) 100%);
    }
    &.is-end    {
      inset-inline-end:0; justify-content:end;
      background:linear-gradient(to left, hsl(var(--tabs-shadow-color)) 0%, hsl(var(--tabs-shadow-color) / 0) 100%);
    }
  }

  #{$theme-dark} & {
    --p-tabs-text-color-hover:      var(--color-neutral-10);
    --p-tabs-text-color-active:     var(--color-neutral-10);
    --p-tabs-text-color-selected:   var(--color-neutral-10);

    --p-tabs-bg-color-hover:        var(--color-neutral-0) / 0.04;

    --p-tabs-outline-color-focus:    var(--color-neutral-0) / 0.16;

    --p-tabs-border-color-selected: var(--color-neutral-10);

    --tabs-button-arrow-color: var(--color-neutral-20);

    --tabs-shadow-color:      var(--color-neutral-100);
  }
}