$card-width: 256px;
$focus-border-width: 2px;

$transition-duration: 0.4s;

body {
  --silke-card-border-radius: 8px;
  --silke-card-aspect-ratio: 16/10;
}

.card {
  width: 100%;
  color: var(--color-neutral-100);
  cursor: pointer;
  gap: 8px;

  &.colorBackdrop {
    .img {
      height: calc(100% - #{(24px + 16px) * 2 - 24px});
      max-width: calc(100% - #{(24px + 16px) * 2 - 24px});
      width: auto;
      aspect-ratio: 16/9;
      scale: 1;
      border-radius: var(--border-radius-tiny);
    }

    .tags {
      translate: 0 10px;
    }

    .tags svg {
      max-height: 16px;
    }

    &:hover,
    &:focus-visible {
      &.hasTags {
        .img {
          scale: 0.97;
        }
      }
      .img {
        translate: 0 -5px;
        background: var(--bgHover);
        &.shadow {
          filter: drop-shadow(0 0 80px rgba(0, 0, 0, 0.7));
        }
      }
    }
  }

  &:hover,
  &:focus-visible {
    .tags,
    .checkbox,
    .overflowMenu {
      translate: 0 0;
      opacity: 1;
    }
  }

  &.selected {
    .imageWrapper {
      outline: 1px solid var(--color-accent-30);
    }
  }

  &.checked {
    .checkbox {
      translate: 0 0;
      opacity: 1;
    }
  }

  &:focus-visible {
    outline: none;
    border: none;
    .imageWrapper {
      outline: 1px solid var(--color-neutral-50);
    }
  }

  .ribbon {
    position: absolute;
    top: 8px;
    left: 8px;
  }

  .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1;
    transform-origin: center center;
    transition:
      $transition-duration scale ease-out,
      3s filter ease-out,
      $transition-duration translate ease-out;
    &.shadow {
      filter: drop-shadow(0 0 50px rgba(0, 0, 0, 0.3));
    }
  }

  .imageWrapper {
    aspect-ratio: var(--silke-card-aspect-ratio);
    border-radius: var(--silke-card-border-radius);
    overflow: hidden;
    img {
      /** Prevent dragging of image */
      user-select: none;
      pointer-events: none;
    }
  }
  .overflowMenu,
  .checkbox,
  .tags {
    opacity: 0;
    transition: $transition-duration all ease-out;
  }

  .checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(var(--color-neutral-10-rgb), 0.2);
  }

  .tags {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    overflow: hidden;
  }

  .tagsTop {
    position: absolute;
    top: 8px;
    right: 8px;
  }
}

.cardText .title {
  font-family: 'Roboto Flex', sans-serif;
  font-variation-settings: var(--font-variation-settings-brand);
  line-height: 1;
}

.overflowHidden {
  overflow: hidden;
}

.grid {
  --max-columns: 10;
  --grid-gap: 24px;
  --min-card-width: 228px;

  display: grid !important;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--min-card-width), 1fr));
  grid-template-rows: max-content;
  max-width: calc(
    var(--card-size) * var(--max-columns) + var(--grid-gap) * (var(--max-columns) - 1)
  );

  &.small {
    --silke-card-border-radius: 8px;
    --min-card-width: 108px;
    --grid-gap: 16px;
    --silke-card-aspect-ratio: 4/3;
    .card {
      gap: 4px;
    }
    .cardText {
      gap: 2px;
    }

    .title {
      font-family: 'Roboto Flex', sans-serif;
      font-variation-settings: var(--font-variation-settings);
      font-size: 12px;
    }

    .subTitle {
      font-size: 10px !important;
    }
  }
}

.folderGrid {
  width: 100%;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  background: var(--color-surface-3);
  border-radius: 0 8px 8px 8px;
  padding: 16px;
  overflow: hidden;
  align-items: stretch;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.folderTab {
  width: 36%;
  aspect-ratio: 93/16;
  path {
    fill: var(--color-surface-3);
  }
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 16px;
    background: var(--color-surface-3);
  }
}

.folder {
  width: 100%;
  height: 100%;
  padding: 12% 16%;
}