$xxxl: 'only screen and (min-width: 1920px)';
$xxl: 'only screen and (max-width: 1919px)';
$xl-1: 'only screen and (max-width: 1700px)';
$xl-2: 'only screen and (max-width: 1300px)';
$xl: 'only screen and (max-width: 1399px)';
$lg: 'only screen and (max-width: 1199px)';
$md: 'only screen and (max-width: 991px)';
$sm: 'only screen and (max-width: 767px)';
$xs: '(max-width: 575px)';

// For Box Layout
$bl: 'only screen and (min-width: 1600px)';

.wcf__portfolio {
  li {
    list-style: none;
  }

  svg {
    width: 1em;
    height: 1em;
  }

  a,
  button {
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
  }

  .filter {
    @media #{$sm} {
      overflow-x: auto;
    }

    button {
      color: #1c1d20;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      border: 0;
      background: transparent;

      @media #{$sm} {
        min-width: max-content;
      }

      span {
        display: block;
        font-size: 12px;
        line-height: 1.8;
        text-align: right;
        color: #999;
        transition: all 0.3s;
      }
    }
  }

  .wcf-posts {
    display: grid;
  }

  &.masonary {
    .wcf-posts {
      grid-auto-flow: dense;
    }
  }

  .wcf-post {
    .thumb {
      display: block;
      line-height: 0;
    }
    img {
      width: 100%;
      object-fit: cover;
    }

    &.large {
      grid-column: auto/span 2;
    }
  }

  .title {
    transition: all 0.3s;
    margin-bottom: 10px;

    &:hover {
      color: #e8bf96;
    }
  }

  .pf-pagination {
    gap: 3px;
    display: flex;

    @media #{$sm} {
      justify-content: center;
    }

    .page-numbers {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      color: #16254c;
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;

      &:not(.prev, .next):hover {
        color: #16254c;
        background-color: #f5f3ed;
      }
    }

    .prev {
      justify-content: flex-start;
    }

    .next {
      justify-content: flex-end;
    }

    .current {
      color: #16254c;
      background-color: #f5f3ed;
    }

    i {
      font-size: 18px;

      &:hover {
        color: #e8bf96;
      }
    }

    svg {
      font-size: 18px;

      &:hover path {
        fill: #e8bf96;
      }
    }
  }

  .pf-load-more {
    display: flex;
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    .wcf__btn {
      position: relative;

      &.loading:after {
        content: "";
        position: absolute;
        top: -100%;
        left: 45%;
        border: 3px solid #f3f3f3;
        border-radius: 50%;
        border-top: 3px solid #e8bf96;
        width: 30px;
        height: 30px;
        animation: spin 2s linear infinite;
      }
    }
  }

  &.style {
    &-1 {
      .filter {
        display: flex;
        justify-content: flex-end;

        @media #{$sm} {
          justify-content: flex-start;
        }

        button {
          color: #555;
          font-weight: 400;
          text-transform: capitalize;
          position: relative;

          span {
            display: none;
          }

          &.mixitup-control-active::before,
          &::before {
            position: absolute;
            content: "";
            width: 0%;
            height: 1px;
            left: 0;
            bottom: 0;
            background-color: #16254c;
            transition: all 0.3s;
          }

          &.mixitup-control-active {
            color: #555;

            span {
              color: #16254c;
            }

            &::before {
              width: 100%;
            }
          }

          &:hover {
            color: #0c0d0e;

            &::before {
              width: 100%;
            }

            span {
              color: #16254c;
            }
          }
        }
      }

      .wcf-post {
        text-align: center;

        img {
          height: auto;
          border-radius: 25px;
        }
      }

      .title {
        color: #16254c;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.5;

        &:hover {
          color: #e8bf96;
        }
      }
    }

    &-2 {
      .filter {
        display: flex;
        align-items: center;
        justify-content: center;

        @media #{$sm} {
          justify-content: flex-start;
        }

        button {
          &:hover {
            color: #e8bf96;

            span {
              color: #e8bf96;
            }
          }
        }

        .mixitup-control-active {
          color: #e8bf96;

          span {
            color: #e8bf96;
          }
        }
      }

      .wcf-posts {
        gap: 65px;
        grid-template-columns: repeat(3, 1fr);

        @media #{$lg} {
          gap: 30px;
        }

        @media #{$md} {
          gap: 20px;
        }

        @media #{$sm} {
          display: flex;
          flex-wrap: wrap;
        }
      }

      .wcf-post {
        position: relative;
        //overflow: hidden;

        img {
          height: 100%;
          transition: all 1s;
        }

        &:hover {
          .content {
            opacity: 1;
            visibility: visible;
          }
          img {
            transform: scale(1.1);
          }
        }
      }

      .content {
        position: absolute;
        bottom: 105px;
        inset-inline-start: 0;
        margin: 0 40px;
        gap: 1px;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        opacity: 0;
        visibility: hidden;
        transition: 0.7s;

        @media #{$lg} {
          margin: 0 20px;
          bottom: 50px;
        }

        @media #{$md} {
          bottom: 30px;
        }
      }

      .title {
        font-weight: 600;
        font-size: 18px;
        line-height: 1.5;
        padding: 10px 20px;
        color: #fff;
        text-transform: uppercase;
        background-color: #1c1d20;
        display: inline-block;

        @media #{$md} {
          padding: 5px 10px;
        }

        &:hover {
          color: #e8bf96;
        }
      }

      .meta {
        color: #fff;
        padding: 10px 20px;
        background-color: #1c1d20;

        @media #{$md} {
          padding: 5px 10px;
        }
      }

      .pf-pagination {
        justify-content: center;
      }
    }

    &-3 {
      gap: 220px;
      display: grid;

      &.enable-filter {
        grid-template-columns: 1fr 3.3fr;
      }

      @media #{$lg} {
        gap: 100px;
      }

      @media #{$md} {
        gap: 40px;
        grid-template-columns: 1fr !important;
      }

      @media #{$sm} {
        gap: 20px;
      }

      .filter {
        margin-top: 210px;
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        justify-content: flex-start;

        @media #{$md} {
          gap: 20px;
          margin-top: 0;
          flex-direction: unset;
        }

        button {
          &:hover {
            color: #e8bf96;

            span {
              color: #e8bf96;
            }
          }
        }

        .mixitup-control-active {
          color: #e8bf96;

          span {
            color: #e8bf96;
          }
        }
      }

      .title {
        color: #1c1d20;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.3;

        &:hover {
          color: #e8bf96;
        }
      }

      .pf-pagination {
        justify-content: center;

        @media #{$sm} {
          justify-content: flex-start;
        }
      }
    }

    &-4 {
      .wcf-post {
        img {
          width: auto;
        }
      }

      .wcf-post {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .filter {
        display: flex;
        align-items: center;
        justify-content: center;

        @media #{$sm} {
          justify-content: flex-start;
        }

        button {
          &:hover {
            color: #e8bf96;

            span {
              color: #e8bf96;
            }
          }
        }

        .mixitup-control-active {
          color: #e8bf96;

          span {
            color: #e8bf96;
          }
        }
      }

      .title {
        margin-top: 20px;
        color: #1c1d20;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.3;

        &:hover {
          color: #e8bf96;
        }
      }

      .pf-pagination {
        justify-content: center;

        @media #{$sm} {
          justify-content: flex-start;
        }
      }
    }
  }
}

.elementor-widget-wcf--portfolio {
  &.wcf--image {
    &-effect-zoom-in,
    &-effect-zoom-out,
    &-left-move,
    &-right-move {
      img {
        transition: all 0.5s;
      }
      .thumb {
        overflow: hidden;
      }
    }

    &-effect-zoom-in {
      img {
        transform: scale(1);
      }
      .wcf-post:hover {
        img {
          transform: scale(1.1);
        }
      }
    }

    &-effect-zoom-out {
      img {
        transform: scale(1);
      }

      .wcf-post:hover {
        img {
          transform: scale(0.9);
        }
      }
    }

    &-left-move {
      img {
        transform: scale(1.1);
      }

      .wcf-post:hover {
        img {
          transform: scale(1.1) translateX(4%);
        }
      }
    }

    &-right-move {
      img {
        transform: scale(1.1);
      }

      .wcf-post:hover {
        img {
          transform: scale(1.1) translateX(-4%);
        }
      }
    }
  }
}
