@import '../../mixins/focus-state';
@import '../../mixins/z-index';

:host(.hide) {
  display: none;
  visibility: hidden;
}

:host {
  z-index: tds-z-index(toast);

  .wrapper {
    display: flex;
    width: calc(352px - 4px);
    background-color: var(--tds-toast-background-color);
    border-radius: 4px;

    &.information {
      border-left: 4px solid var(--tds-toast-icon-color-info);

      tds-icon {
        color: var(--tds-toast-icon-color-info);
      }
    }

    &.success {
      border-left: 4px solid var(--tds-toast-icon-color-success);

      tds-icon {
        color: var(--tds-toast-icon-color-success);
      }
    }

    &.error {
      border-left: 4px solid var(--tds-toast-icon-color-error);

      tds-icon {
        color: var(--tds-toast-icon-color-error);
      }
    }

    &.warning {
      border-left: 4px solid var(--tds-toast-icon-color-warning);

      tds-icon {
        color: var(--tds-toast-icon-color-warning);
      }
    }

    button.close {
      height: 20px;
      width: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 14px 14px 0 22px;
      border: none;
      background: transparent;

      &:hover {
        cursor: pointer;
      }

      &:focus {
        @include tds-focus-state;
      }

      tds-icon {
        color: var(--tds-toast-dissmiss-color);
        padding: 0;
      }
    }
  }

  tds-icon {
    padding: 14px 0 0 12px;
  }

  .content {
    padding: 16px 0 16px 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 250px;
    word-break: break-word;

    .header-subheader {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .header,
    slot[name='header']::slotted(*) {
      /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
      font: var(--tds-headline-07) !important;
      letter-spacing: var(--tds-headline-07-ls) !important;
      color: var(--tds-toast-headline-color);
    }

    .subheader,
    slot[name='subheader']::slotted(*) {
      /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
      color: var(--tds-toast-subheadline-color);
      font: var(--tds-detail-02) !important;
      letter-spacing: var(--tds-detail-02-ls) !important;

      &.no-link {
        slot::slotted(*) {
          padding-bottom: 0;
        }
      }
    }

    .toast-bottom {
      padding-top: 12px;
    }
  }

  .tds-mode-variant-primary {
    --tds-toast-background: var(--tds-toast-background-primary);
  }

  .tds-mode-variant-secondary {
    --tds-toast-background: var(--tds-toast-background-secondary);
  }
}