.notice-text-only {
  &__closable {
    transition: max-height $transition-duration--fast $transition-duration--fast,
      border $transition-duration--fast $transition-duration--fast;
  }

  &__wrapper {
    display: flex;
    padding-top: $baseline * 2;
    padding-bottom: $baseline * 2;
  }

  &__content {
    align-items: center;
    display: flex;
    position: relative;
    width: 100%;
  }

  &__description {
    max-width: 90%;

    .description,
    p {
      @include font-style('body--m', 'body--l');
      margin-bottom: 0;
    }
    .icon {
      border: 3px solid $color-brand--white;
      border-radius: 50%;
      height: 50px;
      width: 50px;

      .optional-icon {
        height: 50px;
        width: 50px;
      }
    }
  }

  &__close {
    display: inline-block;
    height: 20px;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
  }
}

@include viewport--l {
  .notice-text-only {
    &__wrapper {
      padding-top: $baseline * 3;
      padding-bottom: $baseline * 3;
    }

    &__description {
      align-items: center;
      display: flex;

      .icon {
        margin-right: 20px;
      }

      p {
        margin-right: 10px;
      }

      a.standalone {
        display: inline-block;
      }
    }

    &__close {
      top: unset;
    }
  }
}