$border-color: var(
  --wds-add-item-border-color,
  var(--wds-color-border-standard-primary, var(--wsr-color-B20, #5999FF))
);
$fill-hover: var(
  --wds-add-item-fill-hover,
  var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #E7F0FF))
);
$fill: var(
  --wds-add-item-fill,
  var(--wds-color-blue-600, var(--wsr-color-B60, #F4F7FF))
);
$fill-disabled-d70: var(
  --wds-add-item-fill-disabled,
  var(--wds-color-black-100-transparent-5, var(--wsr-color-D70, #ECEFF3))
);
$text-disabled: var(
  --wds-color-text-disabled,
  var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))
);
$radius-08: 8px;

.add-item {
  display: flex;
  height: 100%;
  width: 100%;
  cursor: pointer;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  color: var(
    --wds-add-item-label-color,
    var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF))
  );

  &#{&}--size-small {
    padding: var(--wds-add-item-padding-vertical-small, var(--wds-space-300, 18px))
      var(--wds-add-item-padding-horizontal-large, var(--wds-space-500, 30px));
  }

  &#{&}--size-medium {
    padding: var(--wds-add-item-padding-vertical-medium, var(--wds-space-400, 24px))
      var(--wds-add-item-padding-horizontal-large, var(--wds-space-500, 30px));
  }

  &#{&}--size-large {
    padding: var(--wds-add-item-padding-vertical-large, var(--wds-space-500, 30px))
      var(--wds-add-item-padding-horizontal-large, var(--wds-space-500, 30px));
  }

  &#{&}--remove-padding {
    padding: 0;
  }

  @media (hover: hover) {
    &#{&}--skin-filled:hover,
    &#{&}--skin-image:hover {
      background-color: #{$fill-hover};
    }

    &#{&}--skin-dashes:hover,
    &#{&}--skin-plain:hover {
      background-color: #{$fill-hover};
    }
  }

  &#{&}--skin-dashes:active,
  &#{&}--skin-plain:active,
  &#{&}--skin-filled:active,
  &#{&}--skin-image:active {
    background-color: var(
      --wds-add-item-fill-pressed,
      var(--wds-color-fill-standard-tertiary-active, var(--wsr-color-B40, #D6E6FE))
    );
  }

  &#{&}--skin-plain {
    background-color: var(
      --wds-add-item-fill-plain,
      var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF))
    );
    border: none;
  }

  &#{&}--skin-plain#{&}--disabled {
    background-color: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10))
    );
    color: #{$text-disabled};
  }

  &#{&}--skin-dashes {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 1px dashed #{$border-color};
    outline-offset: -1px;
    border: none;
    background-color: var(
      --wds-add-item-fill-plain,
      var(--wds-color-fill-standard-tertiary, rgba(255, 255, 255, 0.48))
    );
    border-radius: var(
      --wds-add-item-border-dashed-radius,
      var(--wds-border-radius-100, #{$radius-08})
    );
  }

  @media (hover: hover) {
    &#{&}--skin-dashes:hover {
      outline-color: var(
        --wds-add-item-border-color-hover,
        var(--wds-color-border-standard-primary-hover, var(--wsr-color-B20, #5999FF))
      );
    }
  }

  &#{&}--skin-dashes#{&}--disabled {
    background-color: var(
      --wds-add-item-fill-disabled,
      var(--wds-color-black-100-transparent-5, var(--wsr-color-D10-05, rgba(0, 6, 36, 0.05)))
    );
    color: #{$text-disabled};
    outline-color: var(
      --wds-add-item-border-color-disabled,
      var(--wds-color-border-standard-primary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)))
    );
  }

  &#{&}--skin-filled {
    background-color: #{$fill};
    border-radius: var(
      --wds-add-item-border-radius,
      var(--wds-border-radius-400, #{$radius-08})
    );
    border: none;
  }

  &#{&}--skin-filled#{&}--disabled {
    background-color: #{$fill-disabled-d70};
    color: #{$text-disabled};
  }

  &#{&}--skin-image {
    display: block;
    height: 100%;
    padding: var(--wds-add-item-padding-vertical-tiny, var(--wds-space-200, 12px));
    border: none;
    transition: background 0.2s linear;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    background-color: #{$fill};
    border-radius: var(
      --wds-add-item-border-radius,
      var(--wds-border-radius-400, #{$radius-08})
    );
  }

  &#{&}--skin-image#{&}--disabled {
    background-color: #{$fill-disabled-d70};
    color: var(--wds-color-text-disabled, initial);
  }

  &#{&}--size-tiny &__icon,
  &#{&}--size-tiny &__illustration {
    flex-shrink: 0;
    margin: 0px 6px;
  }

  &#{&}--size-tiny#{&}--align-items-left &__icon,
  &#{&}--size-tiny#{&}--align-items-right &__icon {
    margin: 0 var(--wds-space-100, 6px) 0 0;
  }

  /*
   * Doubled: ties with `Image`'s root `background-color` at (0,1,0) and only won
   * on bundle order.
   */
  &__illustration#{&}__illustration {
    background-color: initial;
  }

  &__content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  &__content-container#{&}__content-container--skin-image {
    border: 1px dashed #{$border-color};
    border-radius: var(
      --wds-add-item-border-dashed-radius,
      var(--wds-border-radius-100, 3px)
    );
    padding: var(--wds-add-item-padding-vertical-tiny, var(--wds-space-200, 12px));
  }

  @media (hover: hover) {
    &__content-container#{&}__content-container--skin-image:hover {
      border-color: var(
        --wds-add-item-border-color-hover,
        var(--wds-color-border-standard-primary-hover, var(--wsr-color-B20, #5999FF))
      );
    }
  }

  &__content-container#{&}__content-container--disabled#{&}__content-container--skin-image {
    color: #{$text-disabled};
    border: dashed 1px
      var(
        --wds-add-item-border-color-disabled,
        var(--wds-color-border-standard-primary-disabled, var(--wsr-color-D60, #DFE5EB))
      );
  }

  &__content-container#{&}__content-container--align-items-center {
    align-items: center;
  }

  &__content-container#{&}__content-container--align-items-left {
    align-items: flex-start;
  }

  &__content-container#{&}__content-container--align-items-right {
    align-items: flex-end;
  }

  &__content {
    display: flex;
    flex-direction: column;
    align-items: center;

    &#{&}--size-tiny {
      flex-direction: row;
      justify-content: center;
      max-width: 100%;
    }
  }

  &__content--align-items-left {
    align-items: flex-start;
  }

  &__content--align-items-right {
    align-items: flex-end;
  }

  &__content--align-items-left &__text-wrapper {
    justify-content: flex-start;
  }

  &__content--align-items-right &__text-wrapper {
    justify-content: flex-end;
  }

  &__content--stacked {
    display: grid;
    grid-template-columns: 1fr minmax(0, max-content) 1fr;
    align-items: center;
  }

  &__content--stacked > * {
    grid-row: 2;
    grid-column: 1;
    justify-self: end;
    min-width: 0;
  }

  &__stacked-icon {
    display: flex;
    align-items: center;
  }

  &__content--stacked > #{&}__text-wrapper {
    grid-column: 2;
  }

  &__content--stacked > #{&}__subtitle {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
  }

  &__content--stacked#{&}__content--align-items-left {
    grid-template-columns: auto minmax(0, max-content) 1fr;
    align-items: center;
  }

  &__content--stacked#{&}__content--align-items-left > #{&}__subtitle {
    grid-column: 2 / -1;
    justify-self: start;
  }

  &__content--stacked#{&}__content--align-items-right {
    grid-template-columns: 1fr minmax(0, max-content);
    align-items: center;
  }

  &__content--stacked#{&}__content--align-items-right > #{&}__subtitle {
    justify-self: end;
  }

  &__text-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    &#{&}--size-tiny {
      max-width: 100%;
      flex-basis: auto;
    }

    &#{&}--size-small {
      width: 100%;
      padding-top: var(--wds-space-100, 6px);
    }

    &#{&}--size-medium {
      width: 100%;
      padding-top: var(--wds-space-200, 12px);
    }

    &#{&}--size-large {
      width: 100%;
      padding-top: var(--wds-space-200, 12px);
    }
  }

  /*
   * The Stylable rules were guarded on Text's `skin(standard)` / `weight(thin)`
   * states, which are version-namespaced and unreachable from SCSS. Both are
   * unconditionally true here — this Text is rendered with `skin="standard"
   * weight="thin"` hard-coded — so the guards are dropped and the class is
   * repeated instead, keeping the original (0,3,0) that has to outrank Text's own
   * typography rules.
   */
  &__text-content#{&}__text-content#{&}__text-content {
    color: var(
      --wds-add-item-label-color,
      var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF))
    );
  }

  &#{&}--disabled &__text-content#{&}__text-content {
    color: #{$text-disabled};
  }

  /*
   * Same reasoning: the subtitle Text is rendered without `skin`/`weight`, and
   * Text defaults them to `standard` / `thin`.
   */
  &__subtitle {
    padding-top: var(--wds-space-200, 12px);
  }

  &__subtitle#{&}__subtitle#{&}__subtitle--size-tiny {
    padding-top: var(--wds-space-100, 6px);
  }

  &__subtitle#{&}__subtitle#{&}__subtitle--size-small {
    padding-top: var(--wds-space-100, 6px);
  }

  &__subtitle#{&}__subtitle--size-tiny#{&}__subtitle--placement-top {
    padding-top: 0;
    padding-bottom: var(--wds-space-100, 6px);
  }

  &__subtitle#{&}__subtitle#{&}__subtitle {
    color: var(
      --wds-color-text-standard-secondary,
      var(--wsr-color-D20, #333853)
    );
  }

  &__tooltip#{&}__tooltip {
    display: flex;
    width: 100%;
    height: 100%;
  }

  &__tooltip .popover__element {
    width: 100%;
    height: 100%;
  }

  /* Disabling pointer events in order to delegate mouse enter/leave events */
  &#{&}--disabled {
    pointer-events: none;
  }
}