@import "variables";
@import "mixins";

:host {
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle {
    @include no-select();
    cursor: pointer;
    background-color: $color-grey-100;
    border: 2px solid $color-grey-400;
    padding: 0 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $color-grey-300;
    transition: background-color 0.2s, border 0.2s;

    &.small {
        width: 24px;
        height: 24px;
    }

    &:not(.disabled):hover {
        border-color: $color-success-500;
        background-color: transparentize($color-success-500, 0.9);
    }

    &.selected {
        background-color: $color-success-500;
        border-color: darken($color-success-500, 5%);
        color: white;

        &:not(.disabled):hover {
            background-color: transparentize($color-success-500, 0.2);
            border-color: $color-success-500;
        }
    }

    &:focus {
        outline: none;
        box-shadow: 0 0 2px 2px #6bc1e3
    }

    &.disabled {
        cursor: default;
    }
}
