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

ion-alert {
  --background: #{$alert-background-color} !important;
  --border-color: #{$alert-border-color};
  --border-radius: #{theme-variables.$border-radius-default};
  --border-width: 1px;
  --button-background-color: #{$alert-button-background-color};
  --button-border-color: #{$alert-button-border-color};
  --button-color: #{$alert-button-color};
  --max-width: 400px !important;
  --message-color: #{$alert-message-color};
  --padding: 16px;
  --sub-title-color: #{$alert-sub-title-color};
  --title-color: #{$alert-title-color};
  --width: calc(100% - 32px) !important;

  .alert-wrapper button.alert-button {
    &.alert-button-cancel {
      --button-background-color: transparent;
    }
    &.alert-button-confirm {
      --button-background-color: var(--sd-sys-color-success-overlay);
      --button-border-color: var(--sd-sys-color-success-overlay);
      --button-color: var(--sd-sys-color-on-success);
    }
    &.alert-button-contact {
      --button-background-color: var(--sd-sys-color-primary-overlay);
      --button-border-color: var(--sd-sys-color-primary-overlay);
      --button-color: var(--sd-sys-color-on-primary);
    }
  }

  @each $type, $icon in $alert-types {
    &.#{$type}-alert {
      --title-color: var(--sd-sys-color-#{$type});
      --sub-title-color: var(--sd-sys-color-#{$type}-overlay);
    }
  }
}

// @media (prefers-color-scheme: dark) {
//   .md body ion-alert,
//   .ios body ion-alert,
//   body ion-alert {
//     .alert-wrapper button.alert-button {
//       &.alert-button-cancel {
//         --button-background-color: var(--sd-sys-color-surface-overlay);
//         --button-color: var(--sd-sys-color-on-surface-emphasis-variant);
//       }
//       &.alert-button-confirm {
//         --button-background-color: var(--sd-sys-color-success-inset);
//         --button-border-color: var(--sd-sys-color-success-inset);
//         --button-color: var(--sd-sys-color-success-overlay);
//       }
//       &.alert-button-contact {
//         --button-background-color: var(--sd-sys-color-primary-inset);
//         --button-border-color: var(--sd-sys-color-primary-inset);
//         --button-color: var(--sd-sys-color-on-primary);
//       }
//     }
//   }
// }


@each $type, $icon in $alert-types {
  ion-alert.#{$type}-alert .alert-wrapper {
    @if ($type != 'default') {
      .alert-title::before {
        margin: auto 8px auto 0px;
        height: 20px;
        width: 20px;
        z-index: 2;
        @include icons.icon('icon-' + #{$icon}, 'icon-20');
      }
      .alert-title {
        display: flex;
        flex-direction: row;
      }
      .alert-message {
        padding-left: 44px;
      }
    }
  }
}


/* Alert wrapper */
ion-alert .alert-wrapper {
  @include shadow(lg, important);
  border-color: var(--border-color);
  border-radius: var(--border-radius) !important;
  border-style: solid;
  border-width: var(--border-width);
}


/* Alert head */
ion-alert .alert-wrapper .alert-head {
  padding: var(--padding);
  padding-bottom: calc(var(--padding) / 4);
}


/* Alert title */
ion-alert .alert-wrapper .alert-title {
  @include typography(text-md, semi-bold);
  color: var(--title-color);
}


/* Alert sub title */
ion-alert .alert-wrapper .alert-sub-title {
  @include typography(text-sm, medium);
  color: var(--sub-title-color);
}


/* Alert message */
ion-alert .alert-wrapper .alert-message {
  @include typography(text-sm, regular);
  color: var(--message-color);
  padding: var(--padding);
  padding-bottom: calc(var(--padding) / 2);
}


/* Alert buttons */
ion-alert .alert-wrapper .alert-button-group {
  padding: var(--padding);
}


/* Alert button */
ion-alert .alert-wrapper button.alert-button {
  @include typography(text-sm, semi-bold);
  background-color: var(--button-background-color) !important;
  border-color: var(--button-border-color);
  border-radius: var(--border-radius) !important;
  border-style: solid;
  border-width: 1px;
  color: var(--button-color);
  padding: 8px 14px;
  text-transform: unset;
  &.alert-button-contact {
    display: flex;
    flex-direction: row-reverse;
    margin: 0;
    &::before {
      margin: auto 0 auto 8px;
      height: 16px;
      width: 16px;
      z-index: 2;
      @include icons.icon('icon-link-external-01')
    }
  }
}