:root {
  --mediaLibraryCardWidth: 280px;
  --mediaLibraryCardMargin: 10px;
  --mediaLibraryCardOutsideWidth: calc(var(--mediaLibraryCardWidth) + var(--mediaLibraryCardMargin) * 2);
}

.nc-mediaLibrary-dialog {
  display: grid;
  grid-template-rows: 120px auto;
  width: calc(var(--mediaLibraryCardOutsideWidth) + 20px);

  @media (width >= 800px) {
    width: calc(var(--mediaLibraryCardOutsideWidth) * 2 + 20px);
  }

  @media (width >= 1120px) {
    width: calc(var(--mediaLibraryCardOutsideWidth) * 3 + 20px);
  }

  @media (width >= 1440px) {
    width: calc(var(--mediaLibraryCardOutsideWidth) * 4 + 20px);
  }

  @media (width >= 1760px) {
    width: calc(var(--mediaLibraryCardOutsideWidth) * 5 + 20px);
  }

  @media (width >= 2080px) {
    width: calc(var(--mediaLibraryCardOutsideWidth) * 6 + 20px);
  }
}

.nc-mediaLibrary-title {
  line-height: 36px;
  font-size: 22px;
  text-align: left;
  margin-bottom: 25px;
}

.nc-mediaLibrary-actionContainer {
  text-align: right;
}

.nc-mediaLibrary-uploadButton {
  @apply(--buttonGray);
  @apply(--dropShadowMain);
  margin-bottom: 0;

  & span {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  & input {
    height: .1px;
    width: .1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 0;
    outline: none;
  }
}

.nc-mediaLibrary-lowerActionContainer {
  margin-top: 30px;
}

.nc-mediaLibrary-uploadButton,
.nc-mediaLibrary-deleteButton,
.nc-mediaLibrary-insertButton {
  @apply(--button);
  @apply(--buttonDefault);
  display: inline-block;
  margin-left: 15px;

  &[disabled],
  &.nc-mediaLibrary-uploadButton-disabled {
    @apply(--buttonDisabled);
  }
}

.nc-mediaLibrary-deleteButton {
  @apply(--buttonLightRed);
}

.nc-mediaLibrary-insertButton {
  @apply(--buttonGreen);
}


.nc-mediaLibrary-top {
  position: relative;
  display: flex;
  justify-content: space-between;

  & .nc-mediaLibrary-close {
    @apply(--dropShadowMiddle);

    position: absolute;
    margin-right: -40px;
    left: -40px;
    top: -40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    padding: 0;

    & .nc-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
}

.nc-mediaLibrary-search {
  height: 37px;
  display: flex;
  align-items: center;
  position: relative;
  width: 400px;

  & input {
    background-color: #eff0f4;
    border-radius: var(--borderRadius);

    font-size: 14px;
    padding: 10px 6px 10px 32px;
    width: 100%;
    position: relative;
    z-index: 1;

    &:focus {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--colorBlue);
    }
  }

  & .nc-icon {
    position: absolute;
    top: 50%;
    left: 6px;
    z-index: 2;
    transform: translate(0, -50%);
  }
}

.nc-mediaLibrary-emptyMessage {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nc-mediaLibrary-cardGrid-container {
  overflow-y: auto;
}

.nc-mediaLibrary-cardGrid {
  display: flex;
  flex-wrap: wrap;

  margin-left:  -10px;
  margin-right: -10px;
}

.nc-mediaLibrary-card {
  width: var(--mediaLibraryCardWidth);
  height: 240px;
  margin: var(--mediaLibraryCardMargin);
  border: var(--textFieldBorder);
  border-radius: var(--borderRadius);
  cursor: pointer;
  overflow: hidden;

  &:focus {
    outline: none;
  }
}

.nc-mediaLibrary-card-selected {
  border-color: var(--colorActive);
}

.nc-mediaLibrary-cardImage {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 2px 2px 0 0;
}

.nc-mediaLibrary-cardText {
  color: var(--colorText);
  padding: 8px;
  margin-top: 20px;
  overflow-wrap: break-word;
  line-height: 1.3 !important;
}

.nc-mediaLibrary-dialogPrivate {
  background-color: var(--colorGrayDark);

  & .nc-mediaLibrary-title,
  & .nc-mediaLibrary-emptyMessage,
  & .nc-mediaLibrary-paginatingMessage,
  & h1 {
    color: var(--textFieldBorderColor);
  }

  & .nc-mediaLibrary-card,
  & .nc-mediaLibrary-searchInput {
    background-color: var(--textFieldBorderColor);
  }

  & button:disabled,
  & label[disabled] {
    background-color: rgba(217, 217, 217, 0.15);
  }
}