.sui-a-add-placeholder {
  position: relative;
  background: $sui-color-brand-denim-200;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: $sui-space-md;
  border: $sui-size-border dashed $sui-color-border;
  border-radius: $sui-border-radius-md;
  width: 100%;
  color: $sui-color-primary;
  transition: 0.2s;
  cursor: pointer;

  &.as--disabled {
    pointer-events: none;
    opacity: 0.6;
  }

  &.as--sm {
    padding: $sui-space-sm $sui-space-md;
  }

  &.as--lg {
    padding: $sui-space-xl $sui-space-md;
  }

  &:hover,
  &:focus {
    background: darken($sui-color-brand-denim-200, 1%);
    border-color: $sui-color-primary;
  }
}