@use 'mixins/amixin' as *;
.manage-media {
  height: 70vh;
  overflow: hidden;
  .mat-drawer-container {
    height: 100%;
  }
  .sidebar {
    background-color: var(--mat-sys-background);
  }
}

.inner {
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  .viewport {
    width: 100%;
    @include scrollbar(var(--mat-sys-primary));
  }
  .page {
    .mat-mdc-paginator {
      background-color: transparent;
      ::ng-deep {
        .mat-mdc-paginator-range-label {
          @apply hidden sm:block;
        }
      }
    }
  }
}

.masonry-item {
  position: relative;
  border: 1px solid transparent;
  cursor: pointer;
  .selected {
    position: relative;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      z-index: 2;
      border: 3px solid var(--mat-sys-primary);
    }
  }
  .actions {
    display: none;
    position: absolute;
    z-index: 10;
    gap: 10px;
    ::ng-deep {
      app-btn {
        background-color: var(--mat-sys-inverse-surface);
        border-radius: 4px;
      }
      .icon-delete {
        &:hover {
          .mat-icon {
            color: var(--mat-sys-error);
          }
        }
      }
      .mat-icon {
        color: var(--mat-sys-on-primary);
      }
      .mdc-icon-button {
        --mat-icon-button-state-layer-size: 30px;
        padding: 0px;
        .mat-icon {
          height: 20px;
          width: 20px;
          line-height: 1;
          svg {
            width: 18px;
            height: 18px;
          }
        }
        .mat-mdc-button-touch-target {
          width: 30px;
          height: 30px;
        }
      }
    }
  }
  &:hover {
    .actions {
      display: flex;
    }
    .box {
      opacity: 0.8;
    }
  }
}

.load {
  position: absolute;
  z-index: 10;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
}
