/* ==========================================================================
 * Slat
 * ========================================================================== */

.mds-c-slat {
  --mds-t-background-color: var(--mds-t-background-color--primary);

  box-shadow: 0 1px 0 0 var(--mds-t-border-color--secondary);
  list-style: none;
  padding-bottom: var(--mds-d-spacing--xs);
  padding-top: var(--mds-d-spacing--xs);
  position: relative;

  &.mds-is-dragging::before {
    cursor: grabbing;
  }

  &.mds-is-draggable,
  &.mds-is-dragging {
    &::before {
      content: '';
      cursor: grab;
      display: none;
      height: 100%;
      left: calc(var(--mds-d-spacing--xl) * -1);
      position: absolute;
      top: 0;
      width: var(--mds-d-spacing--xl);

      .mds-c-slats:hover & {
        background-image: svg-load(
          '../../momentum-icons/dist/svg/dots-drag.svg',
          fill: $color-ui--5
        );
        background-position: center;
        background-size: var(--mds-d-font-size--med);
        display: block;
      }
    }
  }

  &.mds-is-dragging,
  .mds-c-slat-group__slats.mds-is-droppable & {
    box-shadow: none;
  }

  &.mds-is-clickable {
    cursor: pointer;
  }
}

.mds-c-slat__content {
  background-color: var(--mds-t-background-color);
  border-radius: var(--mds-d-border-radius--default);
  padding: var(--mds-d-spacing--med) var(--mds-d-spacing--sm);

  .mds-c-slat.mds-c-slat--condensed & {
    padding-bottom: var(--mds-d-spacing--xs);
    padding-top: var(--mds-d-spacing--xs);
  }

  .mds-c-slat.mds-is-dragging & {
    box-shadow: 0 0 0 1px var(--mds-t-border-color--accent),
      var(--mds-d-elevation--4);
  }

  .mds-c-slat.mds-is-draggable:focus-visible & {
    box-shadow: 0 0 0 1px var(--mds-t-border-color--accent);
  }
}