@use '../../../styles/tools' as *;
@use '../../settings/variables' as theme-variables;
@use '../../../icons' as icons;
@import 'variables';

ion-toast {
  --background: #{$toast-background-color};
  --border-color: #{$toast-border-color};
  --header-color: #{$toast-header-color};
  --message-color: #{$toast-message-color};
  --icon-color: #{$toast-icon-color};
  --button-color: #{$toast-button-color};
  --border-radius: #{theme-variables.$border-radius-variant};
  --border-style: solid;
  --border-width: 1px;
  --box-shadow: none;
  --padding: 9px;
  --icon-background: var(--sd-sys-color-surface-overlay);
  --icon-outline: var(--sd-palette-gray-50);
}

:root ion-toast {
  &::part(container) {
    @include shadow(md);
    background-color: var(--background);
    border-radius: var(--border-radius);
    display: flex !important;
    align-items: start;
  }

  &::part(header) {
    @include typography(text-sm, semi-bold);
    color: var(--header-color);
  }

  &::part(message) {
    @include typography(text-sm, regular);
    color: var(--message-color);
  }

  &::part(icon) {
    color: var(--icon-color);
    margin: var(--padding) 0 0 var(--padding);
    background-color: var(--icon-background);
    border-radius: 24px;
    outline-color: var(--icon-outline);
    outline-style: solid;
    outline-width: 4px;
    padding: 6px;
  }

  &::part(button) {
    color: var(--button-color);
    cursor: pointer;
    border-radius: #{theme-variables.$border-radius-default};
    margin-top: 6px;
  }


  @each $color in theme-variables.$ionic-colors {
    &.ion-color-#{$color} {
      // --ion-color-base: transparent;
      // --ion-color-base-rgb: transparent;
      // --background: white;
      --header-color: var(--ion-color-#{$color});
      --message-color: var(--ion-color-#{$color});
      --icon-color: var(--ion-color-#{$color});
      --button-color: var(--sd-sys-color-on-surface);
      --background: var(--sd-sys-color-surface);
      --border-color: var(--sd-sys-color-surface-border-subtle);
      --ion-color-base: var(--background) !important;
      --icon-background: var(--ion-color-#{$color}-outline);
      --icon-outline: var(--ion-color-#{$color}-surface-subtle);
    }
  }
}