.notice-confirmed {
  &__wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-bottom: $spacing--s;
    padding-top: $spacing--s;
  }

  &__media {
    @include center-all;
    width: grid-columns(2, 6);

    img {
      flex-shrink: 0;
      max-height: 80px;
      max-width: 80%;
    }
  }

  &__content {
    display: flex;
    width: $notice-confirmed-content-width;
  }

  &__text {
    width: $notice-confirmed-text-width;

    p:last-child {
      margin-bottom: 0;
    }
  }

  &__close {
    margin-left: auto;
    text-align: right;
    width: $notice-confirmed-close-width;

    button {
      position: relative;
      top: $spacing--xxs;
    }
  }

  &__text {
    &,
    p {
      @include font-style('title--xs', $notice-confirmed-text-font-style--l);
    }
  }
}

// background mapping
@include notifications-notice-confirmed-background-mapping;

@include viewport--l {
  .notice-confirmed {
    &__wrapper {
      padding-bottom: $notice-confirmed-wrapper-spacing--l;
      padding-top: $notice-confirmed-wrapper-spacing--l;
    }

    &__media {
      width: grid-columns(2, 12);

      img {
        max-height: 100px;
      }
    }

    &__content {
      width: $notice-confirmed-content-width--l;
    }

    &__text {
      width: $notice-confirmed-text-width--l;
    }

    &__close {
      width: $notice-confirmed-close-width--l;

      button {
        top: $notice-confirmed-close-button-spacing;
      }

      .icon {
        height: $icon-size--l;
        width: $icon-size--l;
      }
    }
  }
}