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

> *...c'est un "kit" pour Vue.js :)*

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

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

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

    ._pill {
      position: absolute;
      height: calc(100% - 16px);
      transition: left 0.25s, width 0.25s;
      border-radius: 4;
      background: var(--p1-fg);
    }

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

    button {
      use: stack-item-grow;
      padding: 4 8;
      cursor: pointer;
      position: relative;
      z-index: 1;
      white-space: nowrap;
      font-weight: normal;
      color: var(--t3-fg);

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

    ._active {
      color: var(--bg);
      font-weight: bold;

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

  svg {
    size: 1em;
  }
}