/* ==========================================================================
 * Well
 * ========================================================================== */

.mds-c-well {
  --mds-v-well__border-color: var(--mds-t-border-color--secondary);
  --mds-v-well__border-width: 1px;
  --mds-v-well__box-shadow: 0 0 0 transparent;

  border-radius: var(--mds-d-border-radius--default);
  overflow: hidden;
  overflow-wrap: break-word;
  padding: var(--mds-v-well__spacing);
  position: relative;
  transition: box-shadow 0.15s ease-out;
  width: 100%;

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--lg);
  }

  &--appearance-bordered {
    border: var(--mds-v-well__border-width) solid
      var(--mds-v-well__border-color);
    box-shadow: var(--mds-v-well__box-shadow, none);
  }

  &--appearance-raised {
    box-shadow: var(--mds-d-elevation--3), var(--mds-v-well__box-shadow);
  }

  @each $background in (primary, secondary, tertiary) {
    &--background-$(background) {
      background-color: var(--mds-t-background-color--$(background));
    }
  }

  @each $size in (xxxl, xxl, xl, lg, med, sm) {
    &--size-$(size) {
      --mds-v-well__spacing: var(--mds-d-spacing--$(size));

      &.mds-c-well--appearance-bordered {
        --mds-v-well__spacing: calc(
          var(--mds-d-spacing--$(size)) - var(--mds-v-well__border-width)
        );
      }
    }
  }

  &--theme-primary {
    --mds-v-well__box-shadow: inset 0 -8px 0 -4px
      var(--mds-t-color--neutral-intense);
  }

  &--theme-secondary {
    --mds-v-well__box-shadow: inset 0 -8px 0 -4px var(--mds-t-color--neutral);
  }

  &--theme-tertiary {
    --mds-v-well__box-shadow: inset 0 -8px 0 -4px
      var(--mds-t-color--neutral-muted);
  }

  @each $theme in (blue, green, pink, purple, orange, red, yellow) {
    &--theme-$(theme) {
      --mds-v-well__box-shadow: inset
        0 -8px
        0 -4px
        var(--mds-t-color--$(theme));
    }
  }

  &.mds-is-droppable {
    background-color: var(--mds-t-background-color--accent-muted);
    box-shadow: calc(var(--mds-d-spacing--xs) * -1) 0 0 var(--mds-d-spacing--xs)
        var(--mds-t-background-color--accent-muted),
      var(--mds-d-spacing--xs) 0 0 var(--mds-d-spacing--xs)
        var(--mds-t-background-color--accent-muted);
    cursor: grabbing;
  }
}