@import '~box-ui-elements/es/styles/constants/colors';
@import '~box-ui-elements/es/styles/deprecated';

$bp-controls-background: fade-out($black, .2);
$bp-controls-opacity: .9;
$bp-controls-outline: inset 0 0 0 1px fade-out($bdl-gray-20, .5), 0 1px 2px fade-out($black, .9);
$bp-controls-radius-inner: 4px;
$bp-controls-radius-outer: 6px;
$bp-controls-size-default: 44px;
$bp-controls-size-large: 56px;
$bp-controls-size-small: 32px;
$bp-controls-spacing: 6px;
$bp-controls-settings-flyout-background: rgba(255, 255, 255, .9);

@mixin bp-Control($height: $bp-controls-size-default, $width: $bp-controls-size-default) {
    @include bp-Control--fade;
    @include bp-Control--outline;

    display: flex;
    align-items: center;
    justify-content: center;
    width: $width;
    height: $height;
    margin: 0;
    padding: 0;
    color: $white;
    background: transparent;
    border: 0;
    border-radius: $bp-controls-radius-outer;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    zoom: 1;

    &:disabled {
        cursor: default;
        opacity: .2;
        pointer-events: none;
    }

    svg {
        width: $bp-controls-size-small;
        height: $bp-controls-size-small;
        padding: 5px;
        border-radius: $bp-controls-radius-inner;
    }
}

@mixin bp-Control--expand {
    margin-top: -$bp-controls-spacing;
    margin-bottom: -$bp-controls-spacing;
}

@mixin bp-Control--fade {
    opacity: $bp-controls-opacity;
    transition: opacity 150ms;
    will-change: opacity; // Prevent flickering in Safari

    &:focus:not(:disabled),
    &:hover:not(:disabled) {
        opacity: 1;
    }
}

@mixin bp-Control--outline {
    outline: 0;

    &:focus:not(:disabled) {
        box-shadow: $bp-controls-outline; // Show effect for all events in legacy browsers (IE, Safari)
    }

    &:focus-visible:not(:disabled) {
        box-shadow: $bp-controls-outline; // Show effect for keyboard events in modern browsers
    }

    &:focus:not(:focus-visible) {
        box-shadow: none; // Remove effect for mouse events in modern browsers
    }
}

@mixin bp-ControlLabel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: $bp-controls-size-default;
    padding-right: 3px;
    padding-left: 3px;
    color: $white;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    opacity: $bp-controls-opacity;
    user-select: none;
}
