@import '../../../scss/styles.scss';
@layer payload-default {
  .folder-file-card {
    // vars
    --card-border-color: var(--theme-elevation-150);
    --card-bg-color: var(--theme-elevation-0);
    --card-preview-bg-color: var(--theme-elevation-50);
    --card-icon-dots-bg-color: transparent;
    --card-icon-dots-color: var(--theme-elevation-600);
    --card-titlebar-icon-color: var(--theme-elevation-300);
    --card-label-color: var(--theme-text);
    --card-preview-icon-color: var(--theme-elevation-400);
    --assigned-collections-color: var(--theme-elevation-900);

    position: relative;
    display: grid;
    grid-template-areas: 'details';
    border-radius: var(--style-radius-m);
    border: 1px solid var(--card-border-color);
    background-color: var(--card-bg-color);
    cursor: pointer;

    &--file {
      grid-template-rows: 1fr auto;
      grid-template-areas:
        'preview'
        'details';
    }

    &--over {
      --card-border-color: var(--theme-elevation-500);
      --card-bg-color: var(--theme-elevation-150);
      --card-icon-dots-bg-color: transparent;
      --card-icon-dots-color: var(--theme-elevation-400);
      --card-titlebar-icon-color: var(--theme-elevation-250);
      --card-label-color: var(--theme-text);
    }

    &--disabled {
      --card-bg-color: var(--theme-elevation-50);
      cursor: not-allowed;
      &:after {
        content: '';
        position: absolute;
        background-color: var(--theme-bg);
        opacity: 0.5;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        top: -1px;
        left: -1px;
        border-radius: inherit;
      }
    }

    &--selected {
      --card-border-color: var(--theme-success-300);
      --card-bg-color: var(--theme-success-50);
      --card-preview-bg-color: var(--theme-success-50);
      --card-icon-dots-bg-color: var(--theme-success-50);
      --card-icon-dots-color: var(--theme-success-400);
      --card-titlebar-icon-color: var(--theme-success-800);
      --card-label-color: var(--theme-success-800);
      --card-preview-icon-color: var(--theme-success-800);
      --accessibility-outline: 2px solid var(--theme-success-600);
      --assigned-collections-color: var(--theme-success-850);

      .popup:hover:not(.popup--active) {
        --card-icon-dots-bg-color: var(--theme-success-100);
      }
      &:has(.popup--active) {
        --card-icon-dots-bg-color: var(--theme-success-150);
      }

      .icon--dots {
        opacity: 1;
      }

      .folder-file-card__icon-wrap .icon {
        opacity: 0.5;
      }

      .folder-file-card__preview-area .icon {
        opacity: 0.7;
      }

      .folder-file-card__preview-area .thumbnail {
        &:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          background: var(--theme-success-150);
          width: 100%;
          height: 100%;
          mix-blend-mode: hard-light;
        }
      }
    }

    &:not(.folder-file-card--selected) {
      .icon--dots {
        opacity: 0;
      }

      &:hover,
      &:has(.popup--active) {
        --card-bg-color: var(--theme-elevation-50);

        .icon--dots {
          opacity: 1;
        }
      }

      .popup:hover:not(.popup--active) {
        --card-icon-dots-bg-color: var(--theme-elevation-150);
      }
      &:has(.popup--active) {
        --card-icon-dots-bg-color: var(--theme-elevation-200);
      }
    }

    &__drop-area {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      pointer-events: none;
    }

    &__preview-area {
      grid-area: preview;
      aspect-ratio: 1/1;
      background-color: var(--card-preview-bg-color);
      border-top-left-radius: var(--style-radius-s);
      border-top-right-radius: var(--style-radius-s);
      border-bottom: 1px solid var(--card-border-color);
      display: grid;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      grid-template-columns: auto 50% auto;

      &:has(.thumbnail) {
        grid-template-columns: unset;
      }

      > .icon {
        grid-column: 2;
      }

      .icon--document {
        pointer-events: none;
        height: 50%;
        width: 50%;
        margin: auto;
        color: var(--card-preview-icon-color);
      }

      .thumbnail {
        width: 100%;
        height: 100%;
        position: relative;
        border-radius: inherit;
        > img {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: inherit;
        }
      }

      &:has(.thumbnail) {
        justify-content: stretch;
      }

      img {
        height: 100%;
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        border-top-left-radius: var(--style-radius-s);
        border-top-right-radius: var(--style-radius-s);
      }
    }

    &__titlebar-area {
      position: relative;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      grid-area: details;
      border-radius: inherit;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 1rem;
      align-items: center;
      padding: calc(var(--base) / 2);
      background-color: var(--card-bg-color);

      .popup {
        pointer-events: all;
      }
    }

    &__titlebar-labels {
      display: grid;
    }

    &__name {
      overflow: hidden;
      font-weight: bold;
      text-indent: 1px; // prevents left cuttoff of the first letter
      text-wrap: nowrap;
      text-overflow: ellipsis;
      line-height: normal;
      color: var(--card-label-color);
    }

    &__assigned-collections {
      color: var(--assigned-collections-color);
      opacity: 0.5;
      margin-top: 4px;
      line-height: normal;
    }

    &__icon-wrap .icon {
      flex-shrink: 0;
      color: var(--card-titlebar-icon-color);
    }

    .icon--dots {
      rotate: 90deg;
      transition: opacity 0.2s;
      color: var(--card-icon-dots-color);
      border-radius: var(--style-radius-s);
      background-color: var(--card-icon-dots-bg-color);
    }
  }
}