// This rebel line is crying (in WebStorm) but it actually works
@import '~/src/assets/styles/variables';

$dark-bg-hover: #e2e4e9 !default;

.mat-button,
.mat-flat-button {
    border-radius: 17px !important;
    font-size: 13px !important;
    height: 34px;
    display: flex !important;
    align-items: center;

    .mat-button-wrapper {
        display: flex;
        align-items: center;
        line-height: 34px;
        transition: opacity 0.2s;
        width: 100%;

        > *:not(:last-child) {
            margin-right: 6px;
        }

        > span {
            margin: auto;
        }
    }

    &.mat-button-disabled {
        .mat-button-wrapper {
            opacity: 0.3;
        }
    }
}

.mat-flat-button.mat-primary,
.mat-button.primary {
    padding: 0 14px;
    transition: background-color 0.2s, color 0.2s;

    background-color: $primary;

    &.mat-button-disabled {
        background-color: $primary;

        .mat-button-wrapper {
            color: $white;
            opacity: 0.5;
        }
    }

    &:not(.mat-button-disabled):hover {
        background-color: $primary-2;
    }
}

iqser-icon-button,
iqser-chevron-button,
redaction-user-button,
redaction-circle-button {
    position: relative;
    display: flex;

    button {
        font-weight: 400 !important;
        transition: background-color 0.2s;

        &.overlay {
            background: rgba($primary, 0.1);
        }

        &.primary {
            font-weight: 500 !important;
            background-color: $primary;
            color: $white;

            &:hover {
                background-color: $primary-2;
            }
        }

        &.dark-bg:hover {
            background-color: $dark-bg-hover;
        }
    }

    .dot {
        background: $primary;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
    }
}

iqser-chevron-button,
redaction-circle-button,
iqser-icon-button {
    &[aria-expanded='true'] {
        button {
            background: rgba($primary, 0.1);

            &.primary {
                background: $primary-2;
            }
        }
    }
}