toggle-corp/react-store

@import '../../../../stylesheets/utils';

.segment-button-input {
    display: none;
}

.segment-option {
    @include transition-medium;
    margin: 0;
    border: var(--width-separator-thin) solid var(--color-separator);
    background-color: var(--color-foreground);
    cursor: pointer;
    padding: var(--spacing-extra-small) var(--spacing-medium);
    color: var(--color-text-label);
    user-select: none;

    &.checked {
        border-color: var(--color-accent);
        color: var(--color-accent);
        // background-color: var(--color-accent);
        // color: var(--color-text-on-accent);

        &.error {
            background-color: var(--color-danger);
            color: var(--color-text-on-danger);
        }

        &.disabled {
            border-color: var(--color-separator);
            background-color: var(--color-background-disabled);
            color: var(--color-text-disabled);
        }
    }

    &.disabled {
        pointer-events: none;
    }

    &.read-only {
        pointer-events: none;
    }

    &:first-child {
        border-top-left-radius: var(--radius-border-small);
        border-bottom-left-radius: var(--radius-border-small);
    }

    &:last-child {
        border-top-right-radius: var(--radius-border-small);
        border-bottom-right-radius: var(--radius-border-small);
    }

    &:not(:last-child) {
        // border-right: var(--width-separator-thin) solid var(--color-accent);
        // border: var(--width-separator-thin) solid var(--color-separator);

        &.error {
            // border-right: var(--width-separator-thin) solid var(--color-danger);
        }

        &.disabled {
            // border-right: var(--width-separator-thin) solid var(--color-separator-light);
        }
    }

    &:not(.disabled):not(.checked) {
        &:hover {
            background-color: var(--color-background-hover);
            color: var(--color-text);
        }
    }

}