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

@include compatMixins.sky-default-overrides('.sky-toast') {
  --sky-override-toast-align-items: center;
  --sky-override-toast-border-left-width: 30px;
  --sky-override-toast-close-button-border: none;
  --sky-override-toast-close-button-border-radius: #{$sky-border-radius};
  --sky-override-toast-close-button-box-sizing: border-box;
  --sky-override-toast-close-button-color-background: transparent;
  --sky-override-toast-close-button-color-icon: #{$sky-text-color-default};
  --sky-override-toast-close-button-flex-shrink: 1;
  --sky-override-toast-close-button-margin: 0;
  --sky-override-toast-close-button-opacity: 0.8;
  --sky-override-toast-close-button-padding: 0;
  --sky-override-toast-close-button-size: 32px;
  --sky-override-toast-color-background-danger: #{$sky-background-color-danger};
  --sky-override-toast-color-background-info: #{$sky-background-color-info};
  --sky-override-toast-color-background-success: #{$sky-background-color-success};
  --sky-override-toast-color-background-warning: #{$sky-background-color-warning};
  --sky-override-toast-color-border-danger: #{$sky-highlight-color-danger};
  --sky-override-toast-color-border-info: #{$sky-highlight-color-info};
  --sky-override-toast-color-border-success: #{$sky-highlight-color-success};
  --sky-override-toast-color-border-warning: #{$sky-highlight-color-warning};
  --sky-override-toast-content-link-color: #212327cc;
  --sky-override-toast-content-link-decoration: underline;
  --sky-override-toast-content-padding: #{$sky-padding} 0;
  --sky-override-toast-margin-bottom: #{$sky-margin-double};
  --sky-override-toast-padding: 0 #{$sky-padding};
}

@include compatMixins.sky-modern-overrides('.sky-toast', false) {
  --sky-override-toast-close-button-box-sizing: border-box;
  --sky-override-toast-close-button-margin: -10px -10px 0 0;
  --sky-override-toast-close-button-padding: 1px;
  --sky-override-toast-close-button-size: 26px;
  --sky-override-toast-content-link-color: #212327cc;
  --sky-override-toast-icon-top-padding: calc(var(--modern-size-5) * -1);
  --sky-override-toast-info-exclamation-path-color: var(
    --modern-color-gray-105
  );
}

@mixin sky-toast-variant(
  $background-color,
  $border-color,
  $modernIconColor,
  $modernIconTextColor
) {
  background-color: $background-color;
  border-color: $border-color;

  .sky-toast-icon-theme-modern {
    color: $modernIconColor;
    --sky-icon-stack-top-icon-color-override: #{$modernIconTextColor};
  }
}

sky-toast {
  .sky-toast {
    padding: var(
      --sky-override-toast-padding,
      var(--sky-space-inset-balanced-m)
    );
    margin-bottom: var(
      --sky-override-toast-margin-bottom,
      var(--sky-space-inset-balanced-xl)
    );
    border-left-style: solid;
    border-left-width: var(
      --sky-override-toast-border-left-width,
      var(--sky-border-width-accent)
    );
    display: flex;
    flex-direction: row;
    align-items: var(--sky-override-toast-align-items, flex-start);

    .sky-toast-btn-close {
      background-color: var(
        --sky-override-toast-close-button-color-background,
        var(--sky-color-background-action-tertiary-base)
      );
      border: var(
        --sky-override-toast-close-button-border,
        solid var(--sky-border-width-action-base)
          var(--sky-color-border-action-tertiary-base)
      );
      border-radius: var(
        --sky-override-toast-close-button-border-radius,
        var(--sky-border-radius-s)
      );
      color: var(
        --sky-override-toast-close-button-color-icon,
        var(--sky-color-icon-default)
      );
      cursor: pointer;
      flex-shrink: var(--sky-override-toast-close-button-flex-shrink, 0);
      box-sizing: var(
        --sky-override-toast-close-button-box-sizing,
        content-box
      );
      font-weight: bold;
      line-height: 1;
      opacity: var(--sky-override-toast-close-button-opacity, 1);

      height: var(
        --sky-override-toast-close-button-size,
        var(--sky-size-icon-m)
      );
      width: var(
        --sky-override-toast-close-button-size,
        var(--sky-size-icon-m)
      );
      margin: var(
        --sky-override-toast-close-button-margin,
        calc(calc(var(--sky-space-inset-balanced-xl) * 0.5) * -1)
          calc(calc(var(--sky-space-inset-balanced-xl) * 0.5) * -1) 0 0
      );
      padding: var(
        --sky-override-toast-close-button-padding,
        var(--sky-space-inset-balanced-xs)
      );

      &:hover {
        opacity: 1;
      }

      &:focus-visible {
        border: $sky-background-color-primary-dark solid 2px;
        outline: none;
      }
    }
  }

  .sky-toast-content {
    padding: var(
      --sky-override-toast-content-padding,
      0 var(--sky-space-gap-text_action-m) 0 var(--sky-space-gap-icon-l)
    );
    width: 100%;
    word-wrap: break-word;
    overflow: hidden;

    a,
    .sky-btn-link,
    .sky-btn-link-inline {
      color: var(
        --sky-override-toast-content-link-color,
        var(--sky-color-text-default)
      );
      text-decoration: var(
        --sky-override-toast-content-link-decoration,
        var(--sky-font-text_decoration-visible_link)
      );

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

  .sky-box {
    &.sky-toast-info {
      @include sky-toast-variant(
        var(
          --sky-override-toast-color-background-info,
          var(--sky-color-background-container-info)
        ),
        var(
          --sky-override-toast-color-border-info,
          var(--sky-color-border-info)
        ),
        var(--sky-color-icon-info),
        var(
          --sky-override-toast-info-exclamation-path-color,
          var(--sky-color-icon-inverse)
        )
      );
    }

    &.sky-toast-success {
      @include sky-toast-variant(
        var(
          --sky-override-toast-color-background-success,
          var(--sky-color-background-container-success)
        ),
        var(
          --sky-override-toast-color-border-success,
          var(--sky-color-border-success)
        ),
        var(--sky-color-icon-success),
        var(--sky-color-icon-default)
      );
    }

    &.sky-toast-warning {
      @include sky-toast-variant(
        var(
          --sky-override-toast-color-background-warning,
          var(--sky-color-background-container-warning)
        ),
        var(
          --sky-override-toast-color-border-warning,
          var(--sky-color-border-warning)
        ),
        var(--sky-color-icon-warning),
        var(--sky-color-icon-default)
      );
    }

    &.sky-toast-danger {
      @include sky-toast-variant(
        var(
          --sky-override-toast-color-background-danger,
          var(--sky-color-background-container-danger)
        ),
        var(
          --sky-override-toast-color-border-danger,
          var(--sky-color-border-danger)
        ),
        var(--sky-color-icon-danger),
        var(--sky-color-icon-inverse)
      );
    }
  }

  .sky-toast-icon-theme-default {
    color: $sky-color-white;
    margin-left: -31px;
    margin-right: 20px;
  }

  .sky-toast-icon-theme-modern {
    display: none;
  }
}

.sky-theme-modern {
  sky-toast {
    .sky-toast-btn-close {
      transition:
        border-color $sky-transition-time-short,
        box-shadow $sky-transition-time-short;

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

      &:active,
      &:focus-visible {
        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-toast-icon-theme-default {
      display: none;
    }

    .sky-toast-icon-theme-modern {
      display: block;
      margin: var(
          --sky-override-toast-icon-top-padding,
          calc(calc(var(--sky-font-line_height-body-m) * 0.25) * -1)
        )
        0 0;
    }
  }
}
