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

🎯 *UI toolkit with a French touch* 🇫🇷

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

.oui-segmented {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  outline: none;
  padding: 0;

  &._error {
    border-color: var(--error-color, #e53e3e);

    &._focused {
      border-color: var(--error-color, #e53e3e);
      box-shadow: 0 0 0 1px var(--error-color, #e53e3e);
    }
  }

  height: var(--input-height, px(32));
  font-size: 14;

  &._size-lg {
    height: 40;
    font-size: 16;
  }

  &._size-xl {
    height: 64;
    font-size: 24;
  }

  .oui-segmented-container {
    display: flex;
    width: 100%;
    padding: 4;
    gap: 4;
    position: relative;
  }

  .oui-segmented-slider {
    background: var(--p1-fg);
    border-radius: 2;
  }

  button {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2;
    border: none;
    background: transparent;
    color: var(--fg);
    cursor: pointer;
    transition: color 200ms ease;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    padding-x: 8;
    gap: 8;     /* &:hover:not(._active) {
      background: var(--s2-bg);
    } */

    &._active {
      color: white;
    }
  }

  &[disabled] {
    cursor: not-allowed;
    background-color: var(--t3-bg);

    > * {
      opacity: 0.6;
    }

    button {
      cursor: not-allowed;
    }
  }
}