@import '../abstracts/variables';

.alert {
    display: flex;
    padding: 6px 16px;
    border-radius: var(--default-borderradius);
    background-color: transparent;
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

    &.square {
        border-radius: 0px;
    }

    &.dense {
        padding: 0px 12px;
    }
}

.alert-text {
    &-normal {
        color: var(--palette-text-primary);
        background-color: var(--palette-dark-hover);
    }

    @each $color in $palette-colors {
        &-#{$color} {
            color: var(--palette-#{$color}-darken);
            background-color: var(--palette-#{$color}-hover);

            & .alert-icon {
                color: var(--palette-#{$color});
            }
        }
    }
}

.alert-outlined {
    &-normal {
        color: var(--palette-text-primary);
        border: 1px solid var(--palette-text-primary);
    }

    @each $color in $palette-colors {
        &-#{$color} {
            color: var(--palette-#{$color}-darken);
            border: 1px solid var(--palette-#{$color});

            & .alert-icon {
                color: var(--palette-#{$color});
            }
        }
    }
}

.alert-filled {
    &-normal {
        color: var(--palette-dark-text);
        font-weight: 500;
        background-color: var(--palette-dark);
    }

    @each $color in $palette-colors {
        &-#{$color} {
            color: var(--palette-#{$color}-text);
            font-weight: 500;
            background-color: var(--palette-#{$color});
        }
    }
}

.alert-icon {
    display: flex;
    opacity: 0.9;
    padding: 7px 0;
    font-size: 22px;
    margin-right: 12px;
    margin-inline-end: 12px;
    margin-inline-start: unset;

    &.alert-icon-left {
        margin-right: 12px;
        margin-inline-end: 12px;
        margin-inline-start: unset;
    }

    &.alert-icon-right {
        margin-left: 12px;
        margin-inline-start: 12px;
        margin-inline-end: unset;
    }
}

.alert-message {
    padding: 9px 0;
}

.alert-position {
    flex: 1;
    display: flex;
}

.alert-close {
    display: flex;
    flex: 0;
    align-items: center;
    margin-left: 8px;
}