/* ==========================================================================
 * Tiles
 * ========================================================================== */

.mds-c-tiles {
  display: grid;
  grid-gap: var(--mds-d-spacing--lg);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  width: 100%;

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

.mds-c-tile {
  --mds-t-background-color: var(--mds-t-background-color--primary);
  --mds-v-tile__border-color: var(--mds-t-border-color--secondary);
  --mds-v-tile__border-color--accent: var(--mds-t-border-color--accent);

  background-color: var(--mds-t-background-color);
  border-color: var(--mds-v-tile__border-color);
  border-radius: var(--mds-d-border-radius--default);
  border-style: solid;
  border-width: 1px;
  box-shadow: var(--mds-d-elevation--1);
  line-height: 1;
  overflow: hidden;

  &.mds-is-clickable {
    --mds-v-tile__border-color: var(--mds-t-border-color--primary);

    &:enter {
      --mds-t-background-color: var(--mds-t-background-color--secondary);

      cursor: pointer;
    }
  }

  &.mds-is-draggable {
    &:enter {
      --mds-t-background-color: var(--mds-t-background-color--secondary);

      cursor: grab;
    }

    &:active {
      cursor: grabbing;
    }

    &.mds-is-dragging,
    &.mds-is-dragging:enter {
      border-color: var(--mds-t-border-color--accent);
      box-shadow: var(--mds-d-elevation--4);
    }
  }
}