@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';

@include button-shadow;

.icon-button {
    color: $icon-button-color;
    border-radius: 50%;

    &.active {
        color: $icon-button-active-color;

        &:hover { color: $icon-button-active-hover-color }
    }

    &.disabled { color: $disabled-icon-color }

    &.inverted {
        color: $icon-button-color;

        &.active { color: $icon-button-active-color }

        &:hover {
            color: $icon-button-hover-color;
            background-color: $icon-bg-hover-color;
        }

        &:focus { background-color: transparent }
    }

    &.overlayed {
        @include icon-button;
        border-radius: 50%;
        background: $media-icon-bg-color;
        color: $media-icon-color;
        padding: 4px;
        line-height: 20px !important;
    
        &:hover {
            background: $media-icon-bg-color;
            color: $media-icon-hover-color;
        }
    }

    &:hover {
        @include material-transition;
        color: $icon-button-hover-color;
        background-color: $icon-bg-hover-color;
    }

    &:focus { background-color: transparent }
}

// Checkbox with label
label.icon-button {
    &.active {
        color: $ui-text-color;
        background-color: transparent;
    }

    &:hover {
        @include material-transition;
        background-color: transparent;
    }
}

.text-icon-button {
    color: $icon-button-color;
    border-radius: 50%;
    font-size: 14px;

    &.active {
        background-color: $icon-bg-hover-color;
        color: $icon-button-active-color;
    }

    &:hover {
        background-color: $icon-bg-hover-color;
        color: $icon-button-hover-color;
    }
}

.button {
    background-color: $contained-button-color;
    border-radius: $button-radius;

    &:active,
    &:focus {
        background-color: $contained-button-color;
        border-radius: $button-radius;
    }

    &:hover {
        @include shadow-2dp;
        background-color: $contained-button-hover-color;
    }

    &.logo-button {
        background: $contained-button-color;
        margin: 2px;
    
        &:hover { background: $contained-button-hover-color }
    
        .button--destructive:hover { background: $contained-button-hover-color }
    }

    &.button--block { margin: 8px 0 }

    &.button-secondary {
        color: $text-button-color;
        border: none;
        box-shadow: none;
    
        &:hover {
            color: $text-button-color;
            background-color: $text-button-hover-color;
        }
    }

    &.confirmation-modal__cancel-button {
        box-shadow: none;
        background-color: transparent;
        margin: 0 8px;
        color: $text-button-color;
    
        &:hover { background: $text-button-hover-color }
    
        &:focus { background: $text-button-focus-color }
    }
}

.spoiler-button__overlay__label {
    background: $media-icon-bg-color;
    border-radius: $button-radius;
    color: $media-icon-color;
}