.wds-nudge {
  --nudge-background-color: var(--color-background-neutral);
  --nudge-border-radius: var(--radius-medium);
  --nudge-min-height: 106px;
  --nudge-padding: 0;
  --nudge-flex-gap: var(--size-16);
  --nudge-media-width: 104px;
  --nudge-link-text-decoration: underline;
  --nudge-container-padding: var(--size-16);
  --nudge-content-flex-alignment: center;
  --nudge-title-color: var(--color-content-primary);
  --nudge-title-font-weight: var(--font-weight-semi-bold);
  --nudge-title-line-height: var(--line-height-title);
  --nudge-control-width: var(--size-24);
  --nudge-control-background-color: var(--color-background-neutral);

  align-items: stretch;
  background-color: var(--nudge-background-color);
  border-radius: var(--nudge-border-radius);
  display: flex;
  flex: 1;
  gap: var(--nudge-flex-gap);
  min-height: var(--nudge-min-height);
  padding: var(--nudge-padding);
  position: relative;
  overflow: hidden;
  width: 100%;

  &-media {
    flex-basis: var(--nudge-media-width);
    max-width: var(--nudge-media-width);

    &-globe {
      .media-position(161px, -76px, -5px);
    }

    &-lock {
      .media-position(104px, -11px, 18px);

      transform: rotate(-14.86deg);
    }

    &-wallet {
      .media-position(107px, -15px, 18px);
    }

    &-gear {
      .media-position(111px, -18px, 19px);
    }

    &-invite-letter {
      .media-position(105px, -17px, -2px);
    }

    &-personal-card,
    &-business-card {
      .media-position(104px, -15px, 2px);
    }

    &-heart {
      .media-position(95px, -7px, 11px);
    }

    &-multi-currency {
      .media-position(131px, -30px, 1px);
    }

    &-shopping-bag {
      .media-position(116px, -9px, 14px);
    }

    &-flower {
      .media-position(156px, -24px, 11px);
    }

    &-backpack {
      .media-position(123px, -16px, 6px);
    }

    &-gift-box {
      .media-position(129px, -22px, 6px);
    }
  }

  &-container {
    align-items: stretch;
    display: flex;
    flex: 1;
    gap: var(--nudge-flex-gap);
    justify-content: space-between;
    padding: var(--nudge-container-padding) var(--nudge-container-padding)
      var(--nudge-container-padding) 0;
    width: 100%;

    [dir="rtl"] & {
      padding: var(--nudge-container-padding) 0 var(--nudge-container-padding)
        var(--nudge-container-padding);
    }

    .np-theme-personal & {
      &:first-child {
        padding-left: var(--nudge-flex-gap);
      }
    }

    .wds-nudge-content {
      align-self: var(--nudge-content-flex-alignment);
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .wds-nudge-title {
        color: var(--nudge-title-color);
        font-weight: var(--nudge-title-font-weight);
        line-height: var(--nudge-title-line-height);
        margin: 0;
      }

      .wds-nudge-link {
        font-weight: var(--font-weight-semi-bold);
        margin-top: var(--size-4);
        text-decoration: var(--nudge-link-text-decoration);
      }
    }
  }
}

.media-position(@size, @margin-left, @margin-top: 0) {
  margin-left: @margin-left;
  margin-top: @margin-top;
  position: absolute;
  width: @size;

  [dir="rtl"] & {
    transform: scaleX(-1);
    transform: scaleX(-1);
    margin-left: 0;
    margin-right: @margin-left;
  }
}