@use "sizes";
@use "states";

.draco-tabs {
  .draco-tabs__tablist-wrapper {
    position: relative;

    &::before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      border-top: 1px solid var(--token-color-palette-neutral-800);
      content: "";
    }

    .draco-tabs__tablist {
      gap: 20px;
      position: relative;
      display: flex;
      margin: 0;
      padding: 0;
      overflow-x: auto;
      isolation: isolate;
      -webkit-overflow-scrolling: touch;
    }
  }

  .draco-tabs__tab {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--token-color-palette-neutral-400);
    white-space: nowrap;
    text-decoration: none;
    list-style: none;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      right: 50%;
      height: 2px;
      background-color: var(--token-color-palette-neutral-100);
      transition-duration: 0.2s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-property: none;
    }
  }

  .draco-tabs__tab-button {
    position: static;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0;
    color: inherit;
    font-family: var(--token-typography-display-400-font-family);
    font-weight: var(--token-typography-font-weight-regular);
    background-color: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;

    &::after {
      position: absolute;
      content: "";
      inset: 0;
    }
  }

  .draco-tabs__panel {
    padding-top: 10px;

    &[hidden] {
      display: none;
    }
  }
}