@import "../../../src/scss/init";

.page-views {
  --overlay-background-color: var(--navigation-mobile-overlay-background-color);
  --overlay-opacity: 0.2;

  & &__page-content-wrapper {
    margin-top: var(--content-spacer-m);
  }

  &__overlay {
    position: absolute;
    right: 0;
    top: 0;
    width: 90vw;
    height: 100%;
    opacity: 0;
    margin-left: auto;

    .navigation-bar-visible & {
      opacity: 1;
      z-index: 1;
    }

    @include media-breakpoint-up(lg) {
      display: none;
    }
  }

  &__content {
    margin-top: var(--content-spacer-m);
  }

  &__content-column {
    &--aside {
      transition: translate 0.5s;

      @include media-breakpoint-down(lg) {
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        height: 100%;
        translate: -100% 0;
        z-index: 503;
        background-color: $white;
        padding: calc(2rem + 5%) 1.5rem 1.5rem;
      }

      .navigation-bar-visible & {
        translate: 0 0;
      }
    }
  }

  &__count-products {
    @include typography('text-12-regular');
    font-weight: 400;

    @include media-breakpoint-down(lg) {
      display: none;
    }
  }

  &__count {
    @include media-breakpoint-up(lg) {
      display: none;
    }
  }

  &__top-content {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;

    &.col-lg-4 {
      @include media-breakpoint-up(lg) {
        padding-right: var(--content-spacer-xs);
      }
    }

    .form-select {
      @include media-breakpoint-down(md) {
        min-width: 200px;
        width: calc(100% - 4rem);
      }
    }
  }
}
