@import '../../_variables.scss';

.esh-basketstatus {
    cursor: pointer;
    display: inline-block;
    float: right;
    position: relative;
    transition: all $animation-speed-default;

    &.is-disabled {
        opacity: .5;
        pointer-events: none;
    }

    &-image {
        height: 36px;
        margin-top: .5rem;
    }

    &-badge {
        $size: 1.5rem;
        background-color: $color-secondary;
        border-radius: 50%;
        color: $color-foreground-brighter;
        display: block;
        height: $size;
        left: 50%;
        position: absolute;
        text-align: center;
        top: 0;
        transform: translateX(-38%);
        transition: all $animation-speed-default;
        width: $size;
    }

    &-badge-inoperative {
        $size: 1.5rem;
        background-color: $color-warning;
        border-radius: 50%;
        color: $color-foreground-brighter;
        display: block;
        height: $size;
        left: 50%;
        position: absolute;
        text-align: center;
        top: 0;
        transform: translateX(-38%);
        transition: all $animation-speed-default;
        width: $size;
    }

    &:hover &-badge {
        background-color: transparent;
        color: $color-secondary-dark;
        transition: all $animation-speed-default;
    }
}