@use '../../styles/variables.scss';

@mixin segment-size-variant($size, $height) {
    &-#{$size} &-item-label {
        min-height: #{$height - (variables.$segment-container-padding * 2)};
        line-height: #{$height - (variables.$segment-container-padding * 2)};

        @if ($size == xs) {
            padding: 0 variables.$segment-item-xs-padding-x;
            &-only-icon {
                width: variables.$segment-item-only-icon-xs-width;
            }
        } @else {
            padding: 0 variables.$segment-item-padding-x;
            &-only-icon {
                width: variables.$segment-item-only-icon-width;
            }
        }

        & {
            @if ($size == xs or $size == sm or $size == md) {
                font-size: variables.$font-size-sm;
            } @else {
                font-size: variables.$font-size-base;
            }
        }
    }
    &-#{$size} &-item-icon {
        @if ($size == xs) {
            font-size: variables.$font-size-sm;
        } @else {
            font-size: variables.$font-size-base;
        }
    }
}

@mixin segment-item-active() {
    background-color: variables.$segment-active-bg-color;
    border-radius: variables.$segment-border-radius;
    box-shadow: variables.$segment-active-box-shadow;
}

@mixin segment-disabled() {
    &,
    &:hover,
    &:focus {
        color: variables.$segment-disabled-color;
        cursor: variables.$disabled-cursor;
        .icon-with-text {
            color: variables.$segment-disabled-color;
        }
    }
}
