.modalSelectMediaVersion {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  color: var(--primaryTextColor);
  padding: 20px;

  .separator {
    margin: .5em 0;
  }

  h3 {
    font-family: "Roboto Condensed Regular", Arial;
  }

  .fileVersionsWrapper {
    margin-bottom: .5em;
    border-radius: 10px;
    overflow: hidden;
  }

  .fileVersions {
    position: relative;
    overflow-y: auto;
    height: 150px;
    border-radius: inherit;
    background: var(--quaternaryColor);
    scrollbar-width: thin;

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

    .fileVersion {
      display: flex;
      align-items: center;
      transition: background 0.1s ease-in-out;
      cursor: pointer;
      padding: .5em 10px;
      color: var(--primaryTextColor);

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

      // folder icon
      svg {
        margin-right: 10px;
      }

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

  .options {
    display: flex;
    justify-content: flex-end;

    button {
      font-size: 16px;
      filter: saturate(0.7);
      transition: filter 0.3s ease-in-out;
      font-family: "Roboto Bold", Arial;
      padding: .5em;
      border-radius: 10px;
      outline: none;
      background: var(--accentColor);
      color: var(--primaryTextColor);

      &:focus,
      &:hover {
        filter: saturate(1);
      }
    }
  }
}

@media only screen and (min-width: 650px) {
  #modalSelectMediaVersion {
    max-width: 600px;
  }
}
