@use "../../breakpoint" as *;
@use "../../config" as *;
@use "../../feature-flags" as *;
@use "../../motion" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../themes" as *;
@use "../../type" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/high-contrast-mode" as *;
@use "../../utilities/focus-outline" as *;

@function cssColor($color-variable) {
  @return var(--cds-inverse-support-02, #fa4d56);
}

/// notification styles
/// @access public
/// @group notification

@mixin notification {
  .wfp--toast-notification {
    box-sizing: border-box;
    font-size: 100%;
    font-family: inherit;
    vertical-align: initial;
    border: 0;
    display: flex;
    max-width: 28rem;
    height: auto;
    margin: 0.5rem 1rem 0.5rem 0;
    padding: 0 0 0 0.875rem;
    color: var(--cds-inverse-01, var(--ui-01));
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
    @include breakpoint-down(md) {
      width: 100%;
    }

    .#{$prefix}--toast-notification:first-child {
      margin-top: 1rem;
    }

    .#{$prefix}--toast-notification__close-button {
      outline: 2px solid transparent;
      outline-offset: -2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 3rem;
      min-width: 3rem;
      height: 3rem;
      min-height: 3rem;
      margin-left: auto;
      padding: 0;
      background-color: initial;
      border: none;
      cursor: pointer;
      transition: outline 0.11s, background-color 0.11s;

      .#{$prefix}--toast-notification__close-icon {
        fill: var(--cds-inverse-01, var(--ui-01));
      }
    }

    .#{$prefix}--toast-notification__icon {
      flex-shrink: 0;
      margin-top: 0.875rem;
      margin-right: 0.875rem;
    }

    .#{$prefix}--toast-notification__details {
      margin-right: 1rem;
      color: var(--cds-inverse-01, var(--ui-01));
      .#{$prefix}--toast-notification__title {
        font-size: 0.875rem;
        line-height: 1.29;
        letter-spacing: 0.16px;
        margin-top: 1rem;
        font-weight: 600;
        word-break: break-word;
      }

      .#{$prefix}--toast-notification__subtitle {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.29;
        letter-spacing: 0.16px;
        margin-top: 0;
        margin-bottom: 1.5rem;

        word-break: break-word;
      }

      .#{$prefix}--toast-notification__caption {
        font-size: var(--cds-body-short-font-size, 0.875rem);
        font-weight: var(--cds-body-short-font-weight, 400);
        line-height: var(--cds-body-short-line-height, 1.29);
        letter-spacing: var(--cds-body-short-letter-spacing, 0.16px);
        margin-bottom: 1rem;
      }
    }
  }

  .#{$prefix}--toast-notification--info,
  .#{$prefix}--toast-notification--info-square {
    // background: #393939;
    border-left: 3px solid $action-default-fill-primary-default;
  }
  .#{$prefix}--toast-notification--low-contrast
    .#{$prefix}--toast-notification__close-button
    .#{$prefix}--toast-notification__close-icon {
    fill: #161616;
  }

  .#{$prefix}--toast-notification--info-square
    .#{$prefix}--toast-notification__icon,
  .#{$prefix}--toast-notification--info {
    fill: $action-default-fill-primary-default;
  }

  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info
    .#{$prefix}--toast-notification__icon {
    fill: $action-default-fill-primary-default;
  }

  .#{$prefix}--toast-notification--warning-alt
    .#{$prefix}--toast-notification__icon,
  .#{$prefix}--toast-notification--warning
    .#{$prefix}--inline-notification__icon,
  .#{$prefix}--toast-notification--warning
    .#{$prefix}--toast-notification__icon {
    fill: $support-warning-main;
  }

  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning-alt
    .#{$prefix}--toast-notification__icon,
  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning
    .#{$prefix}--toast-notification__icon {
    fill: $support-warning-main;
  }

  .#{$prefix}--toast-notification--success
    .#{$prefix}--inline-notification__icon,
  .#{$prefix}--toast-notification--success
    .#{$prefix}--toast-notification__icon {
    fill: $support-success-main;
  }

  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success
    .#{$prefix}--inline-notification__icon,
  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success
    .#{$prefix}--toast-notification__icon {
    fill: $support-success-main;
  }

  .#{$prefix}--toast-notification--error {
    // background: var(--cds-inverse-02, #393939);
    // border-left: 3px solid var(--cds-inverse-support-01, #fa4d56);
    border-left: 3px solid $support-error-main;
    color: $support-error-main;

    .#{$prefix}--toast-notification__icon {
      fill: currentColor;
    }
  }
  .#{$prefix}--toast-notification--low-contrast {
    .#{$prefix}--toast-notification__details {
      color: $text-body-default;
    }
  }

  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error {
    background: $fill-error;
    border-left: 3px solid $support-error-main;
  }

  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info,
  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info-square {
    background: var(--support-light-04);
    border-left: 3px solid $action-default-fill-primary-default;
    path {
      fill: $action-default-fill-primary-default;
    }
  }

  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success {
    background: $fill-success;
    border-left: 3px solid $support-success-main;
    path {
      fill: $support-success-main;
    }
  }

  .#{$prefix}--toast-notification--success {
    // background: var(--cds-inverse-02, #393939);
    border-left: 3px solid $support-success-main;
  }

  .#{$prefix}--toast-notification--warning,
  .#{$prefix}--toast-notification--warning-alt {
    // background: var(--cds-inverse-02, #393939);
    border-left: 3px solid $support-warning-main;
  }

  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning,
  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning-alt {
    background: $fill-alert;
    border-left: 3px solid $support-warning-main;
    path {
      fill: $support-warning-main;
    }
  }
  .#{$prefix}--toast-notification:first-child {
    margin-top: 1rem;
  }
  .#{$prefix}--toast-notification--warning,
  .#{$prefix}--toast-notification--warning-alt {
    // background: var(--cds-inverse-02, #393939);
    border-left: 3px solid $support-warning-main;
  }

  .#{$prefix}--inline-notification {
    box-sizing: border-box;
    padding: 0;
    font-size: 100%;
    font-family: inherit;
    vertical-align: initial;
    border: 0;
    position: relative;
    display: flex;
    //flex-wrap: wrap;
    width: 100%;
    min-width: 18rem;
    max-width: 18rem;
    height: auto;
    min-height: 3rem;
    margin: 1rem 0;
    color: $text-body-default; // var(--cds-inverse-01, var(--ui-01));

    .#{$prefix}--inline-notification__close-icon {
      path {
        fill: $action-default-fill-primary-default;
      }
    }

    .#{$prefix}--inline-notification__details {
      display: flex;
      flex-grow: 1;
      margin: 0 1rem 0 1rem;

      .#{$prefix}--inline-notification__icon {
        flex-shrink: 0;
        margin-top: 0.9475rem;
        margin-right: 0.7rem;
        margin-bottom: 0.875rem;
      }

      .#{$prefix}--inline-notification__text-wrapper {
        display: flex;
        flex-wrap: wrap;
        padding: 0.86rem 0;

        .#{$prefix}--inline-notification__title {
          font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
          font-weight: var(--cds-productive-heading-01-font-weight, 600);
          line-height: var(--cds-productive-heading-01-line-height, 1.29);
          letter-spacing: var(
            --cds-productive-heading-01-letter-spacing,
            0.16px
          );
          margin: 0 0.25rem 0rem 0; // TODO: Check margin-bottom

          pre {
            font-family: $font-family-monospace;
          }
        }

        .#{$prefix}--inline-notification__subtitle {
          font-size: var(--cds-body-short-font-size, 0.875rem);
          font-weight: var(--cds-body-short-font-weight, 400);
          line-height: 1.45; //var(--cds-body-short-line-height, 1.29);
          letter-spacing: var(--cds-body-short-letter-spacing, 0.16px);
          word-break: break-word;
          margin-top: 0.1rem;

          pre {
            font-family: $font-family-monospace;
          }
        }
      }
    }

    .#{$prefix}--inline-notification__action-button {
      height: 2rem;
      margin-bottom: 0.5rem;
      margin-left: 2.5rem;
      font-weight: 400;
      color: var(--cds-inverse-link, #78a9ff);

      .#{$prefix}--inline-notification__close-icon {
        fill: var(--cds-inverse-01, var(--ui-01));
      }
    }
  }

  .#{$prefix}--inline-notification--info,
  .#{$prefix}--inline-notification--info-square {
    // background: var(--cds-inverse-02, #393939);
    border-left: 3px solid $action-default-fill-primary-default;
  }

  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info,
  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info-square {
    background: $brand-wfp-blue-wfp-blue95; //TODO: contact to design team
    border-left: 3px solid $action-default-fill-primary-default;
  }
  .#{$prefix}--inline-notification--info
    .#{$prefix}--inline-notification__icon {
    color: $action-default-fill-primary-default;
  }

  .#{$prefix}--inline-notification--success,
  .#{$prefix}--inline-notification--success-square {
    // background: var(--cds-inverse-02, #393939);
    border-left: 3px solid $support-success-main;
  }

  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success,
  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success-square {
    background: $support-success-background;
    border-left: 3px solid $support-success-main;
  }

  .#{$prefix}--inline-notification--success
    .#{$prefix}--inline-notification__icon {
    color: $support-success-main;
  }

  .#{$prefix}--inline-notification--error,
  .#{$prefix}--inline-notification--error-square {
    // background: var(--cds-inverse-02, #393939);
    border-left: 3px solid $support-error-main;
  }

  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error,
  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error-square {
    background: $support-error-background;
    border-left: 3px solid $support-error-main;
  }

  .#{$prefix}--inline-notification--error
    .#{$prefix}--inline-notification__icon {
    color: $support-error-main;
  }

  .#{$prefix}--inline-notification--warning,
  .#{$prefix}--inline-notification--warning-square {
    // background: var(--cds-inverse-02, #393939);
    border-left: 3px solid $support-warning-main;
  }

  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning,
  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning-square {
    background: $support-warning-background;
    border-left: 3px solid $support-warning-main;
  }

  .#{$prefix}--inline-notification--warning
    .#{$prefix}--inline-notification__icon {
    color: $support-warning-main;
  }

  .#{$prefix}--inline-notification--low-contrast {
    //color: #161616;
  }

  .#{$prefix}--inline-notification--low-contrast
    .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
    color: $action-default-fill-primary-default;
  }
  .#{$prefix}--inline-notification--low-contrast
    .#{$prefix}--inline-notification__action-button,
  .#{$prefix}--inline-notification--low-contrast
    .#{$prefix}--inline-notification__action-button:active {
    color: $action-default-fill-primary-default;
  }

  .#{$prefix}--inline-notification__close-button {
    outline: 2px solid transparent;
    outline-offset: -2px;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    height: 3rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: outline 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
      background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
  }

  .#{$prefix}--inline-callout__close-button {
    width: fit-content;
    max-width: fit-content;
    min-width: 1rem;
  }

  .#{$prefix}--inline-callout--toggleable {
    cursor: pointer;
    .#{$prefix}--inline-notification__title {
      &::after {
        color: $action-default-fill-primary-default;
        content: " +";
        font-weight: 800;
      }
    }
  }

  .#{$prefix}--inline-callout--toggle--open {
    .#{$prefix}--inline-notification__title {
      &::after {
        content: " -";
      }
    }
  }

  .#{$prefix}--inline-notification__close-button
    .#{$prefix}--inline-notification__close-icon {
    fill: $border-strong;
  }

  .#{$prefix}--inline-notification--low-contrast
    .#{$prefix}--inline-notification__close-button
    .#{$prefix}--inline-notification__close-icon {
    fill: $border-strong;
  }

  .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
    background-color: transparent;
  }

  @media (min-width: 66rem) {
    .#{$prefix}--inline-notification {
      max-width: 46rem;
    }
  }

  @media (min-width: 42rem) {
    .#{$prefix}--inline-notification {
      flex-wrap: nowrap;
      max-width: 38rem;
    }

    .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
      margin: 0.5rem 0;
    }

    .#{$prefix}--inline-notification__close-button {
      position: static;
    }
  }

  .#{$prefix}--block-notification.#{$prefix}--inline-notification {
    max-width: inherit;

    .#{$prefix}--inline-notification__details {
      display: grid;
      // grid-template-columns: min-content 0.9fr;
      grid-template-columns: 0fr 1fr;
      grid-template-areas:
        "icon name"
        "icon subject";

      @include breakpoint(md) {
        grid-template-columns: 0fr 1fr 0fr;
        grid-template-areas: "icon name subject";
      }
    }

    .wfp--inline-notification__icon  {
      grid-area: icon;
    }

    @include breakpoint(md) {
      max-width: inherit;
    }
    width: 100%;
    .#{$prefix}--inline-notification__text-wrapper {
      flex-direction: column;
      grid-area: name;
    }
    .#{$prefix}--inline-notification__actions-wrapper {
      grid-area: subject;
      display: flex;
      > * {
        margin-left: 0.5em;
      }
      > :first-child {
        margin-left: 0;
      }
      .#{$prefix}--btn--tertiary {
        //background: rgba(255, 255, 255, 0.2);
      }
      padding: 0 0 0.8em 0;
      @include breakpoint(md) {
        padding-top: 0.8em;
        padding-left: 0.8em;
        align-items: center;
      }
      /*padding: 0em 0.8em 0.8em 0.8em;
      @include breakpoint(md) {
        padding: 0.8em 0.8em 0.8em 0;
      }*/
      &.#{$prefix}--btn/*--ghost*/ {
        margin: 0.5em 0.4em;
      }
    }
  }
}