@require "variables"

unless flat-build {
    @require "node_modules/boundless-button/style"
}

// Skin-specific styles go here. Demo-specific styles go in demo/style.styl.

.b-segmented-control {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
}

.b-segmented-control-option.b-button {
    align-self: stretch;
    background: SegmentedControl-backgroundColor;
    border: 1px solid SegmentedControl-borderColor;
    border-radius: 0;
    color: SegmentedControl-color;
    cursor: pointer;
    flex-grow: 1;
    font-size: 14px;
    margin: 0;
    padding: 0.5em 0.75em;
    text-align: center;
    white-space: nowrap;

    transition: all 200ms ease;

    &:first-of-type {
        border-top-left-radius: borderRadius;
        border-bottom-left-radius: borderRadius;
    }

    &:last-of-type {
        border-top-right-radius: borderRadius;
        border-bottom-right-radius: borderRadius;
    }

    &:not(:first-of-type) {
        margin-left: -1px;
    }

    &[disabled],
    &[disabled]:active,
    &[disabled]:focus,
    &[disabled]:hover,
    &[disabled]:active,
    &.b-segmented-control-option-selected[disabled] {
        background: SegmentedControl-backgroundColor-disabled;
        border-color: SegmentedControl-borderColor-disabled;
        color: SegmentedControl-color-disabled;
        opacity: SegmentedControl-opacity-disabled;
    }

    &:focus {
        background: SegmentedControl-backgroundColor-focus;
        border-color: SegmentedControl-borderColor-focus;
        color: SegmentedControl-color-focus;
    }

    &:hover {
        background: SegmentedControl-backgroundColor-hover;
        border-color: SegmentedControl-borderColor-hover;
        color: SegmentedControl-color-hover;
    }

    &:active,
    &.b-segmented-control-option-selected,
    &.b-segmented-control-option-selected:focus,
    &.b-segmented-control-option-selected:hover {
        background: SegmentedControl-backgroundColor-active;
        border-color: SegmentedControl-borderColor-active;
        color: SegmentedControl-color-active;
    }

    &.b-segmented-control-option-selected {
        z-index: 1;
    }
}