.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 {
        color: var(--iqser-accent);
        opacity: 0.3;
    }
}

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

    background-color: var(--iqser-primary);

    &.mat-button-disabled {
        background-color: var(--iqser-primary);

        .mat-button-wrapper {
            color: var(--iqser-white);
            opacity: 0.5;
        }
    }

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

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

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

        &.overlay {
            background: rgba(var(--iqser-primary-rgb), 0.1);
        }

        &:not(.overlay):not(.mat-button-disabled):not(.primary):not(.dark-bg):not(.warn):hover {
            background-color: var(--iqser-btn-bg);
        }

        &.primary {
            font-weight: 500 !important;
            background-color: var(--iqser-primary);
            color: var(--iqser-white);

            &:hover {
                background-color: var(--iqser-primary-2);
            }
        }

        &.dark-bg:hover {
            background-color: var(--iqser-btn-bg-hover);
        }
    }

    .dot {
        top: 1px;
        left: 1px;
    }
}

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

            &.primary {
                background: var(--iqser-primary-2);
            }

            &.dossierView {
                background-color: var(--iqser-btn-bg);
            }
        }
    }
}