.selectUnmatchedMediaFiles {
  width: 100%;

  .files {
    height: 150px;
    background: var(--secondaryColor);
    border-radius: 10px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accentColor) #4a4a4a;

    .selectBox {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 20px;
      width: 20px;
      border-radius: 5px;
      border: solid 2px var(--accentColor);
      transition: background 150ms ease-in-out;
      margin-right: .5em;

      svg {
        font-size: .6em;
        overflow: unset;
        opacity: 0;
        transition: opacity 150ms ease-in-out;
      }
    }

    .file {
      display: flex;
      padding: .5em 10px;
      cursor: pointer;

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

      &.selected-true .selectBox {
        background: var(--accentColor);

        svg {
          opacity: 1;
        }
      }
    }
  }
}
