.widget {
  border-radius: 20px;
  background: $color-2;
  padding-inline: 30px;
  padding-block-start: 30px;
  padding-block-end: 40px;

  @include breakpoint(max-sm) {
    border-radius: 10px;
  }
  &-service-details {
    &:not(:last-of-type) {
      margin-bottom: 30px;
    }
  }
  &_category {
    background-color: $color-2;
    padding: 40px 20px;
    border-radius: 40px;

    @include breakpoint(max-xxl) {
      padding: 30px 20px;
      border-radius: 20px;
    }

    .category-box {
      @extend %d-flex, %justify-between, %item-center;
      gap: 20px;
      background-color: $color-1;
      color: $color-white;
      padding: 20px;
      border-radius: 999px;
      @include transition($transition);
      @include breakpoint(max-xl) {
        padding: 15px 20px;
      }

      &:not(:last-of-type) {
        margin-bottom: 20px;

        @include breakpoint(max-md) {
          margin-bottom: 15px;
        }
      }

      .icon {
        @extend %shrink-0, %d-grid, %place-center;
        width: 30px;
        height: 30px;
        background-color: rgba($color-primary, 0.1);
        color: $color-white;
        @include transition($transition);
        border-radius: 100%;
        font-size: 16px;
      }

      &:hover,
      &.active {
        background-color: $color-primary;
        color: $color-1;
        .icon {
          background-color: $color-1;
          color: $color-primary;
          @include transform(rotate(90deg));
        }
      }
    }
  }

  &_contact {
    @extend %d-flex, %flex-col, %item-center, %text-center;
    background-color: $color-primary;
    border-radius: 20px;
    padding: 40px 50px;

    @include breakpoint(max-xxl) {
      padding: 30px 40px;
    }
    @include breakpoint(max-xl) {
      padding: 20px;
      border-radius: 10px;
    }
    @include breakpoint(max-lg) {
      padding: 40px;
    }

    h4 {
      color: $color-1;
      font-weight: 600;
    }

    .icon {
      @extend %d-grid, %place-center;
      width: 96px;
      height: 96px;
      border-radius: 100%;
      background-color: $color-1;
      color: $color-white;
      font-size: 40px;
      margin-top: 18px;

      @include breakpoint(max-md) {
        width: 60px;
        height: 60px;
        font-size: 25px;
      }
    }
    span {
      @extend %d-inline-block;
      color: $color-1;
      font-size: 16px;
      line-height: 1;
      margin-top: 28px;
    }
    a {
      @extend %d-inline-block;
      color: $color-1;
      font-family: $ff-title;
      font-size: 30px;
      font-style: normal;
      font-weight: 600;
      line-height: 1;
      margin-top: 25px;

      @include breakpoint(max-xl) {
        font-size: calc(30px - 3px);
        margin-top: 15px;
      }
      @include breakpoint(max-md) {
        font-size: calc(30px - 8px);
      }
      @include breakpoint(max-sm) {
        font-size: calc(30px - 10px);
      }
    }
  }

  &_title {
    font-size: 30px;
    font-weight: 600;
    line-height: 133.333%;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba($color-white, 0.14);
  }
  &_search {
    .search-form {
      // @extend %d-flex;
      .input-group {
        @extend %no-wrap, %p-relative;

        input,
        button {
          border: none;
          background-color: transparent;

          &:focus,
          &:active,
          &:visited,
          &:focus-visible {
            box-shadow: none;
            outline: none;
          }
        }
        &:not(.has-validation)
          > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(
            .form-floating
          ) {
          border-top-right-radius: 999px;
          border-bottom-right-radius: 999px;
        }
        input {
          border: 1px solid $color-primary;
          border-radius: 999px;
          line-height: 58px;
          padding-inline: 20px 45px;
          color: $color-white;
          font-family: $ff-body;
          font-size: 18px;
          font-weight: 400;

          &::placeholder {
            color: $color-white;
            opacity: 1;
          }

          @include breakpoint(max-xxl) {
            line-height: 48px;
          }
          @include breakpoint(max-lg) {
            line-height: 58px;
          }
          @include breakpoint(max-md) {
            line-height: 48px;
          }
        }
        button {
          @extend %p-absolute;
          border: none;
          color: $color-primary;
          top: 50%;
          right: 20px;
          @include transform(translateY(-50%));
        }
      }
    }
  }
  &_categorys {
    .category-lists {
      margin-top: 10px;
      li {
        &:not(:last-of-type) {
          margin-bottom: 5px;
        }
        a {
          @extend %d-inline-block;
          @include transition($transition);

          &:hover {
            color: $color-primary;
            @include transform(translateX(5px));
          }
        }
      }
    }
  }
  &_posts {
    .widget-post-boxes {
      margin-top: 20px;

      .widget-post-box {
        &:not(:last-of-type) {
          margin-bottom: 20px;

          @include breakpoint(max-md) {
            margin-bottom: 15px;
          }
        }
      }
    }
  }
  &_tags {
    .tags-lists {
      margin-top: 20px;
      ul {
        @extend %d-flex, %flex-wrap;
        row-gap: 17px;
        column-gap: 8px;
        li {
          a {
            @extend %d-inline-block;
            line-height: 1;
            border-radius: 20px;
            border: 1px solid $color-10;
            color: $color-10;
            font-size: $fs-16;
            font-weight: 400;
            padding-inline: 14px;
            padding-block: 7px;

            &:hover {
              border-color: $color-primary;
            }
          }
        }
      }
    }
  }
}

.sidebar-area {
  .widget {
    &:not(:last-of-type) {
      margin-bottom: 30px;
    }
  }
}

.widget-post-box {
  @extend %d-flex;
  gap: 15px;
  @include breakpoint(max-sm) {
    gap: 10px;
  }
  .post-thumb {
    @extend %shrink-0;
    width: 80px;
    height: 85px;
    border-radius: 14px;
    overflow: hidden;

    @include breakpoint(max-xl) {
      width: 60px;
      height: 65px;
      border-radius: 10px;
    }

    @include breakpoint(max-lg) {
      width: 80px;
      height: 85px;
    }

    @include breakpoint(max-md) {
      width: 60px;
      height: 65px;
    }

    img {
      @include transition($transition);
    }
  }
  .post-content {
    .meta {
      @extend %d-flex, %item-center;
      gap: 10px;

      @include breakpoint(max-xl) {
        font-size: 15px;
        gap: 5px;
      }
      @include breakpoint(max-lg) {
        gap: 10px;
        font-size: $fs-18;
      }
      @include breakpoint(max-sm) {
        font-size: 15px;
        gap: 5px;
      }
    }
    .post-title {
      font-size: $fs-18;
      font-weight: 500;
      font-family: $ff-body;
      margin-top: 8px;

      @include breakpoint(max-xl) {
        font-size: 16.5px;
        margin-top: 4px;
      }
      @include breakpoint(max-lg) {
        font-size: $fs-18;
        margin-top: 8px;
      }
      @include breakpoint(max-sm) {
        font-size: 16.5px;
        margin-top: 4px;
      }

      a {
        &:hover {
          color: $color-primary;
        }
      }
    }
  }
  &:hover {
    .post-thumb img {
      @include transform(scale(1.1));
    }
  }
}
