oui-kit/lib/basic/oui-tabs.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../../stylus/index.styl";

.oui-tabs {
  use: stack-y;
  border-radius: 4;

  > ._nav {
    use: stack-x;
    position: relative;
    background: var(--s2-bg);
    border-radius: 4;
    padding: 4;
    gap: 4;

    ._slider {
      transition: transform 0.25s, width 0.25s, height 0.25s, background-color 0.25s, background 0.25s;
      border-radius: 2;
      background: var(--p1-fg);

      &._no-animate {
        transition: none;
      }
    }

    display: flex;
    justify-content: space-evenly;
    width: 100%;

    button {
      use: stack-item-grow;
      padding: 8px 16px;
      cursor: pointer;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 8px;
      border: none;
      background: transparent;
      color: var(--text-muted, #718096);
      transition: color 200ms ease;
      font-weight: 500;
      border-radius: 2;
      padding-x: 8;

      &:hover {
        color: var(--fg);
      }
    }

    ._active {
      color: white;

      // font-weight: bold;
      &:hover {
        color: white;
      }
    }
  }

  svg {
    size: 1em;
  }
}