.decor-single {
  @apply pt-2 px-0 text-primary-500;

  figure {
    @apply
      h-auto
      w-full
      aspect-auto;
  }

  h1 {
    @extend .has-xl-font-size;
    @apply
      mb-0
      mr-6
      font-sans;
  }

  .gallery-use {
    @apply
      select-none;

    .swiper-wrapper,
    .swiper-slide-active {
      @apply
        pointer-events-none;
    }

    .swiper-slide {
      @apply
        flex
        justify-center
        items-center;

      figure {
        @apply
          mb-0
          p-12
          max-w-screen-3xl;
      }
    }

    .inner {
      @apply
        items-center
        hidden
        flex-col;

      &.initialize {
        @apply
          flex;
      }

      &.active {
        @apply
          flex;
      }
    }

    .swiper-button-prev,
    .swiper-button-next {
      @apply
        absolute;
    }

    .swiper-button-next {
      @apply
        right-4
        lg:right-11;
    }

    .swiper-button-prev {
      @apply
        left-4
        lg:left-11;
    }
  }

  .gallery-use,
  .zoom {
    @apply
      fixed
      transition-all
      duration-200
      inset-0
      w-full
      h-full
      z-[999]
      bg-white
      bg-opacity-90
      opacity-0
      pointer-events-none;

    &.active {
      @apply
        opacity-100
        pointer-events-auto;
    }

    figure {
      @apply
        h-full
        w-auto
        relative
        aspect-auto
        bg-transparent;

      img {
        @apply
          h-full
          object-contain
          mx-auto
          w-auto;
      }
    }

    .inner {
      @apply
        p-4
        relative
        overflow-hidden
        h-full
        lg:p-11;

      backdrop-filter: blur(4px);

      [data-close] {
        @apply
          absolute
          lg:right-11
          right-4
          cursor-pointer
          lg:top-11
          top-[18px];

        svg {
          @apply
            h-4
            w-auto;

          path {
            @apply
              stroke-[2];
          }
        }
      }
    }
  }

  .zoom {
    .inner {
      @apply
        flex
        justify-between;

      h5 {
        @apply
          mb-11;
      }

      .zoom-decor {
        @apply
          max-w-[100px]
          hidden
          lg:flex
          flex-col
          ml-11
          cursor-pointer
          justify-center
          bottom-0;

        .icon {
          @apply
            mb-7
            text-sm;

          figure {
            @apply
              mb-[3px]
              h-auto
              inline-block;
          }

          &.active {
            @apply
              cursor-default;

            span {
              @apply
                inline-block
                text-primary-250;
            }
          }
        }
      }

      .zoom-development {
        @apply
          mx-auto
          flex
          flex-col
          text-center;

        .zoom-wrapper {
          @apply
            flex
            h-full
            items-center;
        }

        figure {
          @apply
            h-full
            mb-4
            hidden;

          &.active {
            @apply
              inline-block;
          }

          svg {
            @apply
              absolute
              top-4
              z-50
              cursor-pointer
              right-4;
          }
        }
      }
    }
  }

  .images {
    @apply
      w-full
      flex
      flex-col

      lg:flex-row;
  }

  .content {
    @apply
      flex
      flex-col
      text-xs
      lg:text-sm
      lg:w-3/4

      xl:w-full;

    .sheet {
      @apply
        order-2
        mt-4
        lg:mt-0
        lg:order-none;
    }

    .decors-use {
      @apply
        pb-0
        lg:pb-0
        lg:mt-6
        order-1
        lg:order-none
        border-primary-250;

      .renders {
        @apply
          hidden;

        &.active {
          @apply
            flex
            gap-4
            lg:gap-6;
        }

        figure {
          @apply
            mb-1
            h-24
            inline-block
            w-auto
            cursor-pointer
            lg:mb-0;

          img {
            @apply
              h-full
              w-auto;
          }
        }
      }
    }

    .heading {
      @apply
        lg:mb-2
        mb-[2px]
        text-xxs
        lg:text-xs
        font-mono;
    }
  }

  .info {
    @apply
      w-full
      mb-8
      lg:mb-16
      flex
      lg:flex-row
      flex-col;

    .highlight {
      @apply
        relative
        cursor-pointer
        col-span-4
        lg:col-span-2
        xl:col-span-4
        w-full;

      svg {
        @apply
          absolute
          top-4
          cursor-pointer
          right-4;
      }

      figure {
        @apply
          hidden;

        img {
          @apply
            inline-block;
        }

        &.active {
          @apply
            w-full
            inline-block;
        }
      }
    }

    .icons {
      @apply
        px-0
        mb-3
        mt-4
        lg:mt-0
        w-full
        max-w-full

        lg:px-8
        lg:max-w-[165px];

      > div {
        @apply
          flex
          gap-4
          lg:gap-0
          flex-row
          lg:flex-col;
      }

      span {
        @apply
          text-sm
          lg:mb-5
          inline-block;
      }

      .icon {
        @apply
          flex
          cursor-pointer
          flex-col;

        &.active {
          @apply
            cursor-default;

          span {
            @apply
              text-primary-250;
          }
        }
      }

      figure {
        @apply
          mb-2
          max-w-[120px]
          lg:max-w-full
          inline-block;

        img {
          @apply
            object-contain
            w-full
            h-auto;
        }
      }
    }
  }

  .title {
    @apply
      flex
      mb-4
      lg:mb-9
      items-center;

    .new-in {
      @apply
        p-[3px]
        mt-0
        lg:mt-[2px]
        px-2
        shadow-md
        text-xs
        rounded-[5px]
        uppercase;
    }
  }

  .additional {
    @apply
      mt-4
      lg:mt-6
      order-3
      lg:order-none;

    .accordions {
      @apply
        first:border-t
        border-primary-250;

      .accordion-single {
        @apply
          lg:py-3
          py-2
          border-b
          border-primary-250;

        .title {
          @apply
            justify-between
            pb-0
            mb-0
            items-center;
        }

        .content-accordion {
          > div {
            @apply
              pb-3;
          }
        }

        h3 {
          @apply
            font-mono
            text-xxs
            leading-none
            pt-[9px]
            pb-2
            lg:text-xs;
        }
      }
    }
  }
}

#wpadminbar {
  .decor-panel {
    .inner {
      @apply
        pt-[127px]
        lg:pt-[187px];
    }
  }
}

.decor-panel {
  @apply
    fixed
    opacity-0
    pointer-events-none
    inset-0
    w-full
    h-full
    transition-all
    duration-300
    z-[9]
    bg-[#cecfcf]
    bg-opacity-60;

  &.active {
    @apply
      opacity-100
      pointer-events-auto;
  }

  .outer {
    @apply
      w-full
      h-full
      absolute
      hidden
      z-0
      inset-0;

    &.active {
      @apply
        block;
    }
  }

  .inner {
    @apply
      max-w-xs
      bg-white
      transition-all
      duration-500
      h-full
      z-10
      relative
      pt-[95px]
      lg:pt-[155px]
      px-11;

    .filters {
      @extend .has-sm-font-size;
      @apply
        flex
        uppercase
        items-center
        justify-between;

      svg {
        @apply
          w-2.5
          rotate-45
          cursor-pointer
          h-2.5;

        line {
          @apply
            stroke-2;
        }
      }
    }

    form {
      @apply
        overflow-auto
        pb-32
        max-h-full
        pr-8
        -mr-8
        mt-10
        md:mt-14;
    }

    .actions {
      @apply
        flex
        mt-10
        justify-end;

      input[type=reset] {
        @extend .has-sm-font-size;
        @apply
          transition-all
          duration-200
          hover:text-primary-250;
      }

      input[type=submit] {
        @extend .has-sm-font-size;
        @apply
          px-3
          ml-3
          py-[2px]
          border
          transition-all
          duration-200
          hover:text-primary-250
          hover:border-primary-250
          rounded-[5px];
      }
    }

    div.order-by {
      @apply
        mt-0;

      &:first-child {
        @apply
          mt-6;

        .single {
          .accordion-single {
            @apply
              border-t
              mb-0;
          }
        }
      }

      .single {
        .accordion-single {
          @apply
            py-3
            md:py-4
            border-black;
        }
      }
    }

    .meta,
    .order-by {
      @apply
        mt-4;

      .single {
        &.features {
          .accordion-single {
            @apply
              border-b-black
              mb-6;
          }
        }

        .accordion-single {
          @apply
            border-b
            mb-2.5
            md:mb-3
            md:pb-3
            pb-2.5
            border-primary-100;

          .title {
            @apply
              flex
              justify-between
              pl-2.5
              pb-0
              items-center;

            span {
              @extend .has-sm-font-size;
            }

            svg {
              @apply
                w-3;

              path {
                @apply
                  w-auto;
              }
            }
          }

          .list {
            @extend .has-xs-font-size;
            @apply
              font-mono
              px-6;

            .list-inside {
              @apply
                mt-4
                mb-3
                inline-block;

              .term {
                @apply
                  transition-all
                  cursor-pointer
                  pb-3
                  last:pb-0
                  duration-200
                  flex
                  items-center
                  hover:opacity-50;

                label {
                  @apply
                    w-full
                    cursor-pointer
                    pr-2.5
                    relative
                    top-px
                    inline-block;
                }

                input {
                  @apply
                    bg-center
                    cursor-pointer
                    h-2.5
                    w-2.5;

                  &:checked {
                    @apply
                      bg-center
                      cursor-pointer
                      h-2.5
                      w-2.5;

                    background-image: url("../images/close.svg");
                  }
                }
              }
            }

            input {
              @apply
                appearance-none;
            }
          }
        }
      }
    }
  }
}

.decor-filter {
  @apply
    mb-6
    order-1
    flex
    items-end
    justify-between;

  &.desktop {
    @apply
      hidden
      lg:flex;
  }

  .active-filters {
    @apply
      w-full
      mx-20
      flex
      flex-wrap
      gap-x-8;

    .single-filter {
      @apply
        flex
        relative
        gap-x-8
        top-[2px]
        h-full;

      a {
        @apply
          flex
          items-center
          gap-2
          text-xs
          opacity-50
          font-mono;

        span {
          @apply
            inline-block;
        }

        svg {
          @apply
            h-2
            relative
            w-auto;

          * {
            @apply
              stroke-[4];
          }
        }
      }
    }
  }

  &.mobile {
    @apply
      flex
      mb-2
      lg:hidden;

    .filters {
      @apply
        fixed
        w-12
        h-12
        bg-white
        shadow-md
        rounded-full
        z-10
        bottom-4
        flex
        justify-center
        items-center
        right-8;

      svg {
        @apply
          h-5
          w-auto;

        line {
          stroke-width: 1;
        }
      }
    }

    .decor-info {
      @apply
        flex
        w-full
        justify-between;

      span,
      a,
      div {
        @extend .has-xs-font-size;
      }
    }
  }

  .decor-grid {
    @extend .has-sm-font-size;
    @apply
      uppercase
      flex;

    span {
      @apply
        mr-3;
    }

    > div {
      @apply
        flex;

      a {
        @apply
          cursor-pointer
          ml-2.5;

        &.active {
          @apply
            text-primary-250;
        }
      }
    }
  }

  .decor-info {
    @apply
      flex;
  }

  .decor-number {
    @extend .has-sm-font-size;
    @apply
      ml-7
      flex
      uppercase;

    .count {
      @apply
        mr-1;
    }
  }

  .filters {
    @apply
      flex
      cursor-pointer
      items-center
      justify-start;

    span {
      @extend .has-sm-font-size;
      @apply
        mr-2
        uppercase;
    }

    svg {
      @apply
        w-2.5
        h-2.5;

      line {
        @apply
          stroke-2;
      }
    }
  }
}

.inner-list {
  @apply
    order-2;
}

.decors-container {
  @apply
    opacity-0
    gap-y-4
    gap-x-4
    grid-cols-4
    grid
    lg:gap-y-8
    lg:gap-x-8;

  &.grid-small {
    @apply
      grid-cols-2
      lg:grid-cols-4;
  }

  &.grid-large {
    @apply
      grid-cols-1
      lg:grid-cols-2;
  }
}
