$prefix: "adui-alert";

.#{$prefix} {
  &-base {
    position: relative;
    padding-left: 12px;
    padding-right: 12px;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 4px;
      overflow: hidden;
    }

    &::before {
      background-color: currentColor;
      opacity: 0.05;
    }

    &::after {
      box-shadow: 0 0 0 1px currentColor;
      opacity: 0.15;
    }
  }
  &-inner {
    position: relative;
    z-index: 1;
    display: flex;
  }
  &-icon {
    flex: none;
    margin-right: 8px;
    fill: currentColor;
  }
  &-text {
    flex: 1;
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--gray-900);
  }
  &-title {
    font-weight: 600;
    color: currentColor;
  }
  &-close {
    flex: none;
    margin-left: 12px;
    transition: all var(--motion-duration-base) var(--ease-in-out);
  }
  &-closeIcon {
    fill: currentColor;
    transition: inherit;
    opacity: 0.4;
    cursor: pointer;

    &:hover {
      opacity: 0.65;
      fill: currentColor;
    }

    &:active {
      opacity: 0.9;
      fill: currentColor;
    }
  }
  &-closeText {
    cursor: pointer;
    opacity: 0.5;
    transition: inherit;

    &:hover {
      opacity: 0.7;
    }

    &:active {
      opacity: 0.9;
    }
  }
  &-expand {
    padding-top: 8px;
    color: var(--gray-800);
    cursor: pointer;
    transition: all var(--motion-duration-base) var(--ease-in-out);

    &:hover {
      color: var(--gray-900);
    }
  }
  &-light {
    padding-left: 0;
    padding-right: 0;

    &::before {
      opacity: 0;
    }

    &::after {
      opacity: 0;
    }
  }

  &-normal {
    color: var(--gray-800);
  }
  &-primary {
    color: var(--primary-color);
  }
  &-success {
    color: var(--ad-green);
  }
  &-info {
    color: var(--ad-blue);
  }
  &-warning {
    color: var(--ad-orange);
  }
  &-danger {
    color: var(--ad-red);
  }
  &-medium {
    .#{$prefix} {
      &-icon {
        margin-top: 10px;
      }
      &-close {
        margin-top: 11px;

        &_text {
          margin-top: 8px;
        }
      }

      &-title {
        margin-bottom: 8px;
      }

      &-text,
      &-close,
      &-expand {
        font-size: var(--font-size-medium);
        line-height: 24px;
      }
    }
  }
  &-small {
    .#{$prefix} {
      &-icon {
        margin-top: 8px;
      }
      &-close {
        margin-top: 9px;

        &_text {
          margin-top: 8px;
        }
      }

      &-title {
        margin-bottom: 8px;
      }

      &-text,
      &-close,
      &-expand {
        font-size: var(--font-size-small);
        line-height: 20px;
      }
    }
  }
  &-mini {
    .#{$prefix} {
      &-icon {
        margin-top: 8px;
      }
      &-close {
        margin-top: 9px;

        &_text {
          margin-top: 8px;
        }
      }

      &-title {
        margin-bottom: 4px;
      }

      &-text,
      &-close,
      &-expand {
        font-size: var(--font-size-mini);
        line-height: 18px;
      }
    }
  }
}