@use "../variables";
.file-manager-navigation,
.file-manager-folders,
.selected-file-details {
  background-color: variables.$custom-white;
}

.files-main-nav {
  max-height: calc(100vh - 17.5rem);
}

@media (min-width: 576px) {
  .file-manager-navigation {
    width: 30rem;
  }
}
.file-format-icon svg {
  width: 2.2rem;
  height: 2.2rem;
}

.folder-svg-container svg {
  width: 3rem;
  height: 3rem;
}

.file-details img {
  width: 150px;
  height: 150px;
  background-color: variables.$light;
  border-radius: 50%;
}

@media (max-width: 1200px) {
  .selected-file-details.open {
    width: 19.5rem;
    position: absolute;
    display: block;
    inset-inline-end: 0;
    inset-block-start: 0.5rem;
    box-shadow: 0 0.125rem 0 rgba(10, 10, 10, .04);
    border-inline-start: 1px solid var(--default-border);
  }
}

.file-manager-navigation.close {
  display: none;
}

.file-manager-folders.open {
  display: block;
}

@media (max-width: 365px) {
  .file-manager-container .file-folders-container {
    max-height: calc(100vh - 12.9rem);
  }
}

ul.files-main-nav {
  margin-block-end: 0;

  li {
    padding: 0.5rem 0.75rem;
    border-radius: variables.$default-radius;
    margin-block-end: 0.25rem;
    svg {
      width: 20px;
      height: 20px;
    }
    i {
      font-size: 20px;
    }
    svg,i {
      color: variables.$text-muted;
      fill: variables.$text-muted;
    }
    &.active,&:hover {
      svg,i {
        color: variables.$primary;
        fill: variables.$primary;
      }
    }
    &:last-child {
      margin-block-end: 0;
    }

    div {
      color: variables.$text-muted;
    }

    &:hover {
      div {
        color: variables.$primary;
      }
    }

    &.active {
      background-color: variables.$primary-01;

      div {
        color: variables.$primary;
      }
    }

    div.filemanager-upgrade-storage {
      width: 235px;
      height: auto;
      background-color: variables.$light;
      border: 2px dashed variables.$default-border;
      border-radius: variables.$default-radius;
      text-align: center;
      color: variables.$default-text-color;
      padding: 1rem;

      img {
        width: 150px;
        height: 150px;
      }
    }
  }
}
#file-manager-storage {
  .apexcharts-pie line, .apexcharts-pie circle {
    stroke: transparent;
  }
  .apexcharts-datalabels-group {
    .apexcharts-text.apexcharts-datalabel-label {
      fill: variables.$text-muted !important;
    }
  }
}
#file-manager-storage {
  .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
    fill: variables.$default-text-color !important;
  }
}
.file-important {
  svg {
    width: 18px;
    height: 18px;
    color: variables.$text-muted;
    fill: variables.$text-muted;
    cursor: pointer;
    &:hover {
      color: variables.$warning;
      fill: variables.$warning;
    }
  }
  &.true {
    svg {
      color: variables.$warning;
      fill: variables.$warning;
    }
  }
}
.card.custom-card.file-category-card {
  position: relative;
  // z-index: 0;
  border: 0;
  // &:before {
  //   content: "";
  //   position: absolute;
  //   width: 100%;
  //   height: 100%;
  //   border-radius: 0.3rem;
  //   inset-inline-start: 0;
  //   inset-block-start: 0;
  //   z-index: -1;
  // }
  &.primary {
    background-color: rgba(var(--primary-rgb), 0.1);
  }
  &.info {
    background-color: rgba(var(--info-rgb), 0.1);
  }
  &.warning {
    background-color: rgba(var(--warning-rgb), 0.1);
  }
  .file-img{
    svg {
      width: 56px;
      height: 56px;
    }
  }
} 
.file-icons {
  position: relative;
}
ul.files-media-list {
  margin-block-end: 0;
  li {
    margin-block-end: 1rem;
    &:last-child {
      margin-block-end: 0;
    }
  }
}
.file-manager-upgrade-img {
  img {
    max-height: 150px;
  }
}
ul.file-manager-activity-list {
  margin-block-end: 0;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    width: 0.0938rem;
    height: 100%;
    inset-inline-start: 20px;
    inset-block-start: 0;
    background-color: variables.$default-border;
  }
  li {
    margin-block-end: 1.2rem;
    &:last-child {
      margin-block-end: 0;
    }
  }
}