@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./toast.common";

// Ionic Toast
// --------------------------------------------------

:host {
  --box-shadow: #{globals.$ion-elevation-4};
  --max-width: 343px;
  --start: #{globals.$ion-space-200};
  --end: #{globals.$ion-space-200};

  @include globals.typography(globals.$ion-body-md-medium);

  // TODO(ROU-10853): replace this value with a layer token.
  z-index: 1001;
}

// Toast Wrapper
// --------------------------------------------------

.toast-wrapper {
  @include globals.margin(auto);

  display: block;
  position: absolute;

  // TODO(ROU-10853): replace this value with a layer token.
  z-index: 10;
}

/*
 * In `md` mode, the toast fades in when presented.
 * To achieve the fade-in effect, the initial opacity must be set
 * to a value less than 1.
 */
:host(.md) .toast-wrapper {
  opacity: 0.01;
}

/*
 * In `ios` mode, the toast will move into the screen based
 * on the `position`. If the `position` is `middle`, the toast
 * will fade in from the middle of the screen.
 * To achieve the fade-in effect, the initial opacity must be set
 * to a value less than 1.
 */
:host(.ios) .toast-wrapper.toast-middle {
  opacity: 0.01;
}

// Toast Container
// --------------------------------------------------

.toast-container {
  @include globals.padding(globals.$ion-space-300, globals.$ion-space-400);
}

// Toast Shapes
// --------------------------------------------------

:host(.toast-shape-soft) {
  --border-radius: #{globals.$ion-border-radius-200};
}

:host(.toast-shape-round) {
  --border-radius: #{globals.$ion-border-radius-400};
}

:host(.toast-shape-rectangular) {
  --border-radius: #{globals.$ion-border-radius-0};
}

// Toast Header
// --------------------------------------------------

.toast-header {
  @include globals.typography(globals.$ion-heading-h6-medium);
}

// Toast Button
// --------------------------------------------------

.toast-layout-baseline .toast-button-group-start {
  @include globals.margin-horizontal(null, globals.$ion-space-400);
}

.toast-layout-stacked .toast-button-group-start {
  @include globals.margin(null, null, globals.$ion-space-400, null);
}

.toast-layout-baseline .toast-button-group-end {
  @include globals.margin-horizontal(globals.$ion-space-400, null);
}

.toast-layout-stacked .toast-button-group-end {
  @include globals.margin(globals.$ion-space-400, null, null, null);
}

.toast-button-group {
  gap: globals.$ion-space-400;
}

.toast-button {
  @include globals.typography(globals.$ion-body-md-regular);
  @include globals.padding(0);

  // necessary for ripple to work properly
  position: relative;

  background-color: transparent;

  text-decoration: underline;

  overflow: hidden;
}

// Toast Icon & Button Icon
// --------------------------------------------------

.toast-icon {
  @include globals.margin-horizontal(0, globals.$ion-space-200);
}

// Toast Icon
// --------------------------------------------------

.toast-icon,
.toast-button-icon {
  font-size: globals.$ion-scale-600;
}

// Bold Toast
// --------------------------------------------------

:host(.toast-hue-bold) {
  --background: #{globals.$ion-bg-neutral-boldest-default};
  --background-activated: #{globals.$ion-bg-neutral-boldest-press};
  --color: #{globals.$ion-text-inverse};
  --button-color: #{globals.$ion-text-inverse};
}

:host(.toast-hue-bold.ion-color) .toast-wrapper {
  background: globals.current-color(base);
  color: globals.current-color(contrast);
}

:host(.toast-hue-bold.ion-color) .toast-button {
  color: globals.current-color(contrast);
}

// Subtle Toast
// --------------------------------------------------

:host(.toast-hue-subtle) {
  --background: #{globals.$ion-bg-neutral-subtlest-default};
  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
  --color: #{globals.$ion-text-default};
  --button-color: #{globals.$ion-text-link-default};
}

:host(.toast-hue-subtle) .toast-button-cancel {
  color: #{globals.$ion-icon-subtlest};
}

:host(.toast-hue-subtle.ion-color) .toast-wrapper {
  background: globals.current-color(base, $subtle: true);
  color: globals.current-color(contrast, $subtle: true);
}