@layer components {
.alert {
@apply tw-p-4 !tw-z-[99999999999] tw-border-0 tw-border-l-4 tw-rounded-none tw-mb-4;
}
[dir="rtl"] .alert {
@apply tw-border-l-0 tw-border-r-4;
}
.alert h4 {
@apply tw-text-base tw-font-semibold;
}
.alert hr {
@apply !tw-my-4;
}
.alert .alert-link {
@apply tw-font-medium;
}
.alert-dismissable .close, .alert-dismissible .close {
@apply !tw-right-0;
}
.alert-success {
@apply tw-bg-success-50 tw-border-success-400 tw-text-success-700;
}
.alert-success h4 {
@apply tw-text-success-800;
}
.alert-success hr {
@apply tw-border-t tw-border-success-200/80;
}
.alert-success .alert-link {
@apply tw-text-success-700 hover:tw-text-success-600 focus:tw-text-success-600;
}
/* info */
.alert-info {
@apply tw-bg-primary-50 tw-border-info-400 tw-text-primary-700;
}
.alert-info h4 {
@apply tw-text-primary-800;
}
.alert-info hr {
@apply tw-border-t tw-border-primary-200/60;
}
.alert-info .alert-link {
@apply tw-text-primary-700 hover:tw-text-primary-600 focus:tw-text-primary-600;
}
/* warning */
.alert-warning {
@apply tw-bg-warning-50 tw-border-warning-400 tw-text-warning-700;
}
.alert-warning h4 {
@apply tw-text-warning-800;
}
.alert-warning hr {
@apply tw-border-t tw-border-warning-200/80;
}
.alert-warning .alert-link {
@apply tw-text-warning-700 hover:tw-text-warning-600 focus:tw-text-warning-600;
}
/* danger */
.alert-danger {
@apply tw-bg-danger-50 tw-border-danger-400 tw-text-danger-700;
}
.alert-danger h4 {
@apply tw-text-danger-800;
}
.alert-danger hr {
@apply tw-border-t tw-border-danger-200/60;
}
.alert-danger .alert-link {
@apply tw-text-danger-700 hover:tw-text-danger-600 focus:tw-text-danger-600;
}
/* float */
.alert.float-alert {
@apply tw-inline-block tw-my-0 tw-mx-auto tw-fixed tw-transition-all tw-duration-75 tw-z-[1031] tw-top-5 tw-right-5 tw-max-w-sm;
}
.alert.float-alert span[data-notify="icon"] {
@apply tw-text-[19px] tw-block tw-left-[17px] tw-absolute tw-top-[52%] -tw-mt-[11px];
}
.alert.float-alert .alert-title {
@apply tw-font-medium tw-ml-8 tw-float-left rtl:tw-float-right;
}
.alert.float-alert button.close {
@apply tw-absolute tw-right-2.5 tw-top-1/2 -tw-mt-[18px] tw-z-[1033] tw-block tw-rounded-[50%] tw-opacity-40 tw-leading-[11px] tw-w-9 tw-h-9 !tw-outline-none tw-text-center tw-p-[3px] tw-font-normal;
}
.alert-success.float-alert button.close {
@apply tw-text-success-800;
}
.alert-info.float-alert button.close {
@apply tw-text-info-800;
}
.alert-warning.float-alert button.close {
@apply tw-text-warning-800;
}
.alert-danger.float-alert button.close {
@apply tw-text-danger-800;
}
.alert.float-alert button.close:hover {
@apply tw-opacity-60;
}
.alert.float-alert .close ~ span {
display: block;
max-width: 89%;
}
}