.selectUnmatchedMediaFolders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
  border-radius: inherit;
  gap: 1em;

  .vertical-err {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }

  .folder {
    display: flex;
    justify-content: baseline;
    border-radius: 10px;
    flex-direction: column;
    gap: .5em;
    align-items: center;
    text-align: center;
    transition: background 0.1s ease-in-out;
    cursor: pointer;
    padding: 1em;
    border: solid 3px var(--tertiaryColor);
    color: var(--primaryTextColor);

    &:hover {
      background: var(--secondaryColor);
    }

    &.selected-true {
      background: var(--tertiaryColor);
      cursor: default;
    }

    .folderIcon {
      position: relative;

      p {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--primaryColor);
        font-size: .8em;
        font-family: "Roboto Bold", Arial;
        position: absolute;
        animation: appear 200ms ease-in-out;
      }
    }

    svg {
      font-size: 2em;
      fill: var(--tertiaryTextColor);
    }

    // path name
    p {
      user-select: none;
      overflow-wrap: break-word;
      overflow: hidden;
      word-break: break-all;
    }
  }
}