@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

@include mixins.sky-component-host('modern') {
  display: block;
}

@include compatMixins.sky-modern-overrides('.sky-alert') {
  --sky-override-alert-button-padding: 0;
  --sky-override-alert-button-size: 32px;
  --sky-override-alert-inner-icon-color: var(--sky-color-icon-default);
  --sky-override-alert-padding: 0 var(--modern-size-10);
  --sky-override-alert-text-link-color: #212327cc;
  --sky-override-alert-text-vertical-padding: var(--modern-size-15);
}

@include mixins.sky-component('modern', '.sky-alert') {
  padding: var(--sky-override-alert-padding, var(--sky-space-inset-balanced-s));
  border-left: solid var(--sky-border-width-accent);
  color: var(--sky-color-text-default);
  display: flex;
  flex-direction: row;
  align-items: center;

  .sky-alert-content {
    padding: var(
        --sky-override-alert-text-vertical-padding,
        var(--sky-space-inset-balanced-none)
      )
      var(--sky-space-gap-text_action-m)
      var(
        --sky-override-alert-text-vertical-padding,
        var(--sky-space-inset-balanced-none)
      )
      var(--sky-space-gap-icon-l);
    width: 100%;

    ::ng-deep a {
      color: var(
        --sky-override-alert-text-link-color,
        var(--sky-color-text-default)
      );
      text-decoration: var(--sky-font-text_decoration-visible_link);

      &:hover {
        color: var(--sky-color-text-default);
      }
    }
  }

  button {
    margin-left: auto;
    height: var(--sky-override-alert-button-size, auto);
    width: var(--sky-override-alert-button-size, auto);
  }

  &.sky-alert-info,
  &.sky-alert-success,
  &.sky-alert-warning,
  &.sky-alert-danger {
    &:before {
      display: none;
    }
  }

  &:not(.sky-alert-danger) {
    --sky-icon-stack-top-icon-color-override: #{$sky-text-color-default};
  }

  &.sky-alert-info {
    background-color: var(--sky-color-background-container-info);
    border-color: var(--sky-color-border-info);
  }

  &.sky-alert-success {
    background-color: var(--sky-color-background-container-success);
    border-color: var(--sky-color-border-success);
  }

  &.sky-alert-warning {
    background-color: var(--sky-color-background-container-warning);
    border-color: var(--sky-color-border-warning);
  }

  &.sky-alert-danger {
    background-color: var(--sky-color-background-container-danger);
    border-color: var(--sky-color-border-danger);
  }

  .sky-alert-close {
    cursor: pointer;
    line-height: 1;
    padding: var(
      --sky-override-alert-button-padding,
      var(--sky-space-inset-balanced-xs)
    );
    color: var(--sky-color-icon-default);
    border-style: solid;
    border-color: var(--sky-color-border-action-tertiary-base);
    border-radius: var(--sky-border-radius-s);
    border-width: var(--sky-border-width-action-base);
    background-color: var(--sky-color-background-action-tertiary-base);
    display: none;
    flex-shrink: 0;

    &:hover {
      opacity: 1;
      border-color: var(--sky-color-border-action-tertiary-hover);
      border-width: var(--sky-border-width-action-hover);
    }

    &:focus-visible {
      outline: none;
      border-color: var(--sky-color-border-action-tertiary-focus);
      border-width: var(--sky-border-width-action-focus);
    }

    &:active {
      border-color: var(--sky-color-border-action-tertiary-focus);
      border-width: var(--sky-border-width-action-focus);
    }

    &:focus-visible:not(:active) {
      box-shadow: var(--sky-elevation-raised-100);
    }
  }

  &.sky-alert-closeable {
    .sky-alert-close {
      display: block;
    }
  }

  .sky-alert-icon-theme-modern {
    display: block;
  }

  &.sky-alert-info .sky-alert-icon-theme-modern {
    color: var(--sky-color-icon-info);
    --sky-icon-stack-top-icon-color-override: var(
      --sky-override-alert-inner-icon-color,
      var(--sky-color-inverse)
    );
  }

  &.sky-alert-success .sky-alert-icon-theme-modern {
    color: var(--sky-color-icon-success);
  }

  &.sky-alert-warning .sky-alert-icon-theme-modern {
    color: var(--sky-color-icon-warning);
  }

  &.sky-alert-danger .sky-alert-icon-theme-modern {
    color: var(--sky-color-icon-danger);
  }
}
