.add-item {
  color: var(--wds-add-item-label-color, var(--wds-color-text-standard-primary));

  &#{&}--size-small {
    padding: var(--wds-add-item-padding-vertical-small, var(--wds-space-400))
      var(--wds-add-item-padding-horizontal-large, var(--wds-space-700));
  }

  &#{&}--size-medium {
    padding: var(--wds-add-item-padding-vertical-medium, var(--wds-space-600))
      var(--wds-add-item-padding-horizontal-large, var(--wds-space-700));
  }

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

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

  &#{&}--skin-dashes {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 1px dashed
      var(--wds-add-item-border-color, var(--wds-color-fill-dark-primary));
    border-radius: var(
      --wds-add-item-border-dashed-radius,
      var(--wds-border-radius-400)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-dashes:hover {
      outline-color: var(
        --wds-add-item-border-color-hover,
        var(--wds-color-fill-dark-primary)
      );
    }

    &#{&}--skin-filled:hover,
    &#{&}--skin-image:hover {
      background-color: var(
        --wds-add-item-fill-hover,
        var(--wds-color-fill-dark-secondary-hover)
      );
    }

    &#{&}--skin-dashes:hover,
    &#{&}--skin-plain:hover {
      background-color: var(
        --wds-add-item-fill-hover,
        var(--wds-color-fill-dark-secondary-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-dark-secondary-active)
    );
  }

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

  &#{&}--skin-dashes#{&}--disabled {
    outline-color: var(
      --wds-add-item-border-color-disabled,
      var(--wds-color-fill-dark-primary-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)))
    );
  }

  &#{&}--skin-filled#{&}--disabled,
  &#{&}--skin-image#{&}--disabled {
    background-color: var(
      --wds-add-item-fill-disabled,
      var(--wds-color-black-100-transparent-5, var(--wsr-color-D70, #ECEFF3))
    );
  }

  &#{&}--skin-filled {
    background-color: var(--wds-add-item-fill, var(--wds-color-black-750));
    border-radius: var(--wds-add-item-border-radius, var(--wds-border-radius-600));
  }

  &#{&}--skin-image {
    padding: var(--wds-add-item-padding-vertical-tiny, var(--wds-space-300));
    background-color: var(--wds-add-item-fill, var(--wds-color-black-750));
    border-radius: var(--wds-add-item-border-radius, var(--wds-border-radius-600));
  }

  &__text-content#{&}__text-content#{&}__text-content {
    color: var(--wds-add-item-label-color, var(--wds-color-text-standard-primary));
  }

  &__content-container#{&}__content-container--skin-image {
    border: 1px dashed
      var(--wds-add-item-border-color, var(--wds-color-fill-dark-primary));
    border-radius: var(
      --wds-add-item-border-dashed-radius,
      var(--wds-border-radius-400)
    );
    padding: var(--wds-add-item-padding-vertical-tiny, var(--wds-space-300));
  }

  @media (hover: hover) {
    &__content-container#{&}__content-container--skin-image:hover {
      border-color: var(
        --wds-add-item-border-color-hover,
        var(--wds-color-fill-dark-primary)
      );
    }
  }

  &__content-container#{&}__content-container--disabled#{&}__content-container--skin-image {
    border: dashed 1px
      var(
        --wds-add-item-border-color-disabled,
        var(--wds-color-fill-dark-primary-disabled)
      );
  }
}