@import './styles.scss';

@layer payload-default {
  .payload-toast-container {
    --offset: calc(var(--gutter-h) / 2);

    padding: 0;
    margin: 0;

    .payload-toast-close-button {
      position: absolute;
      order: 3;
      left: unset;
      inset-inline-end: base(0.8);
      top: 50%;
      transform: translateY(-50%);
      color: var(--theme-elevation-600);
      background: unset;
      border: none;

      svg {
        width: base(0.8);
        height: base(0.8);
      }

      &:hover {
        color: var(--theme-elevation-250);
        background: none;
      }

      [dir='RTL'] & {
        right: unset;
        left: 0.5rem;
      }
    }

    .toast-title {
      line-height: base(1);
      margin-right: base(1);
    }

    .payload-toast-item {
      padding: base(0.8);
      color: var(--theme-elevation-800);
      font-style: normal;
      font-weight: 600;
      display: flex;
      gap: 1rem;
      align-items: center;
      width: 100%;
      border-radius: 4px;
      border: 1px solid var(--theme-border-color);
      background: var(--theme-input-bg);
      box-shadow:
        0px 10px 4px -8px rgba(0, 2, 4, 0.02),
        0px 2px 3px 0px rgba(0, 2, 4, 0.05);

      .toast-content {
        transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
        width: 100%;
      }

      &[data-front='false'] {
        .toast-content {
          opacity: 0;
        }
      }

      &[data-expanded='true'] {
        .toast-content {
          opacity: 1;
        }
      }

      .toast-icon {
        width: base(0.8);
        height: base(0.8);
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        & > * {
          width: base(1.2);
          height: base(1.2);
        }
      }

      &.toast-warning {
        color: var(--theme-warning-800);
        border-color: var(--theme-warning-250);
        background-color: var(--theme-warning-100);

        .payload-toast-close-button {
          color: var(--theme-warning-600);

          &:hover {
            color: var(--theme-warning-250);
          }
        }
      }

      &.toast-error {
        color: var(--theme-error-800);
        border-color: var(--theme-error-250);
        background-color: var(--theme-error-100);

        .payload-toast-close-button {
          color: var(--theme-error-600);

          &:hover {
            color: var(--theme-error-250);
          }
        }
      }

      &.toast-success {
        color: var(--theme-success-800);
        border-color: var(--theme-success-250);
        background-color: var(--theme-success-100);

        .payload-toast-close-button {
          color: var(--theme-success-600);

          &:hover {
            color: var(--theme-success-250);
          }
        }
      }

      &.toast-info {
        color: var(--theme-elevation-800);
        border-color: var(--theme-elevation-250);
        background-color: var(--theme-elevation-100);

        .payload-toast-close-button {
          color: var(--theme-elevation-600);

          &:hover {
            color: var(--theme-elevation-250);
          }
        }
      }
    }
  }
}