@import '../../styles/variables';

.SingleNotification {
  display: flex;
  align-items: stretch;
  min-height: 48px;
  margin: 12px;
  border-radius: 3px;

  &__icon {
    display: flex;
    justify-content: center;
    width: 48px;
    align-items: center;
    background: $badge-main-color;
    border-right: 2px solid $white;

    @media screen and (max-width: $layout-desktop) {
      padding: 0 12px;
    }
  }

  &__content {
    display: flex;
    flex: 6;
    align-items: center;
    padding: 0 24px;
    background: $badge-main-color;

    @media screen and (max-width: $layout-desktop) {
      padding: 8px 12px;
      font-size: $font-small;
    }
  }

  &__link {
    display: flex;
    align-items: center;
    padding: 0 24px;
    min-height: 48px;
    background: $badge-main-color;

    @media screen and (max-width: $layout-desktop) {
      padding: 0 $spacing * 4;
      font-size: $font-small;
    }
  }

  .Popup {
    width: 30%;
  }

  @media screen and (max-width: $layout-desktop) {
    .PopupWrapper {
      width: 100%;
      height: calc(100% - 56px);
      top: 56px;
      align-items: stretch;

      .Popup {
        border-radius: 0;
        width: 100%;
      }
    }
  }
}