/* stylelint-disable selector-no-type, declaration-no-important */

$alert-padding-size: 10px;
$alert-icon-size: 24px;

.frc-alert {
    border-radius: $border-radius;
    margin-bottom: 10px;
    padding: $alert-padding-size;
}

.frc-alert-inner {
    align-items: center;
    display: flex;
}

.frc-alert-title {
    font-size: 16px;
    font-weight: 500;
    line-height: $alert-icon-size;
}

.frc-alert-icon {
    align-self: flex-start;
    margin-right: $alert-padding-size;

    svg {
        height: $alert-icon-size;
        width: $alert-icon-size;
    }
}

.frc-alert-children {
    font-size: 14px;
    margin-right: 1rem;
}

.frc-alert-dismiss {
    align-items: center;
    align-self: flex-start;
    cursor: pointer;
    display: flex;
    height: $alert-icon-size;
    justify-content: center;
    margin-left: auto;
    opacity: .5;
    width: $alert-icon-size;

    &:hover {
        opacity: 1;
    }
}

.frc-alert-variant-info {
    background: lighten($info, 50%);
    border: 1px solid lighten($info, 45%);

    .frc-alert-title {
        color: $info;
    }

    .Glyph {
        fill: $info;
    }
}

.frc-alert-variant-danger {
    background: lighten($danger, 40%);
    border: 1px solid lighten($danger, 35%);

    .frc-alert-title {
        color: $danger;
    }

    .Glyph {
        fill: $danger;
    }
}

.frc-alert-variant-success {
    background: lighten($success, 55%);
    border: 1px solid lighten($success, 45%);

    .frc-alert-title {
        color: $success;
    }

    .Glyph {
        fill: $success;
    }
}

.frc-alert-variant-warning {
    background: lighten($warning, 35%);
    border: 1px solid lighten($warning, 25%);

    .frc-alert-title {
        color: $gray-900;
    }

    .Glyph {
        fill: $orange;
    }

    .Close {
        fill: $warning;
    }

}