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

.main {
    composes: small-button;
    position: relative;

    @include small-button-states();

    & > * {
        cursor: pointer;
    }

    .icon-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .padded {
        padding-inline-end: .3em;
    }

    &.selected {
        color: $text-on-light;
        fill: $text-on-light;
    }

    &.omit-border {
        border: 0;
        box-shadow: none;
        &.selected {
            background-color: initial;
        }
    }

    .hidden {
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    input[type="radio"],
    input[type="checkbox"] {
        margin: 0;
        visibility: visible;

        &.capturing {
            z-index: 1;
        }
    }
}