@use "@material/checkbox/_index" as checkbox;
@use "@material/ripple/_index" as ripple;
@use "@material/rtl/_index" as rtl;

@use "@material/feature-targeting/_index" as feature-targeting;

.image-grid {
  flex-grow: 1;
  padding: 16px;
}

.folder-menu {
  .mdc-list-item {
    white-space: nowrap;
  }
}

.display-container {
  padding-bottom: 16px;
  max-width: 2000px;
  margin: 0 auto;
  .subheader {
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    .mdc-typography--caption {
      flex-grow: 1;
    }
  }
  .mdc-image-list {
    &__item {
      margin: 2px;
      width: calc((100% * 1 / 6) - 4px);
      @include ripple.surface;
      @include ripple.radius-bounded;
      @include ripple.states(black);
      cursor: pointer;
      .container {
        position: relative;
        .checkbox-container {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          display: flex;
          justify-content: flex-end;
          background: linear-gradient(rgba(black, 0.7), transparent);
          .mdc-checkbox {
            @include checkbox.disabled-container-colors(
              rgba(white, 0.26),
              transparent,
              rgba(white, 0.26),
              rgba(white, 0.078)
            );
            @include checkbox.ink-color(white);
            @include checkbox.disabled-ink-color(white);
            @include ripple.states(
              white,
              false,
              feature-targeting.all(),
              ".mdc-checkbox__ripple"
            );
            &__background {
              border-radius: 50%;
            }
          }
        }
      }

      @media (min-width: 1240px) and (max-width: 1399px) {
        width: calc((100% * 1 / 4) - 4px);
      }

      @media (min-width: 1240px) and (max-width: 939px) {
        width: calc((100% * 1 / 3) - 4px);
      }

      @media (min-width: 560px) and (max-width: 1239px) {
        width: calc((100% * 1 / 3) - 4px);
        .mdc-drawer--open + .mdc-drawer-app-content & {
          width: calc((100% * 1 / 2) - 4px);
        }
      }

      @media (min-width: 600px) and (max-width: 659px) {
        width: calc((100% * 1 / 2) - 4px);
        .mdc-drawer--open + .mdc-drawer-app-content & {
          width: calc(100% - 4px);
        }
      }

      @media (max-width: 599px) {
        width: calc((100% * 1 / 2) - 4px);
      }

      @media (min-width: 1240px) and (max-width: 1149px) {
        .drawer-open & {
          width: calc((100% * 1 / 3) - 4px);
        }
      }

      @media (min-width: 1240px) and (max-width: 999px) {
        .drawer-open & {
          width: calc((100% * 1 / 2) - 4px);
        }
        .mdc-drawer--open + .mdc-drawer-app-content & {
          width: calc((100% * 1 / 3) - 4px);
        }
        .mdc-drawer--open + .mdc-drawer-app-content.drawer-open & {
          width: calc((100% * 1 / 2) - 4px);
        }
      }
    }
    &__image-aspect-container {
      padding-bottom: calc(100% / var(--aspect-ratio, 1));
    }
  }
}
