@import 'variables', 'mixin';

/**
 * Table of Contents:

 * 1.0 - ul
 * 2.0 - widget_product_categories
 * 3.0 - widget-posts
*/


.sidebar {
      .widget {
            margin: 0 0 50px;

            .tagcloud {
                  a {
                        font-size: 14px !important;
                        border: 1px solid black;
                        padding: 4px;
                        transition: $transition !important;
                        background-image: unset;
						color: #000 !important;

                        &:hover {
                              background: #000 !important;
                              background-image: unset;
                              color: #fff !important;
                        }
                  }
            }

            &-title {
                  font-size: 20px;
                  line-height: 20px;
                  text-transform: uppercase;
                  margin-bottom: 40px;
                  position: relative;
                  font-weight: bold;
                  letter-spacing: 2px;

                  &:before {
                        content: "";
                        @include absolute(40px, auto, 0, 0);
                        background: $primary-color;
                        width: 50px;
                        height: 3px;
                  }
            }

            ul.menu {
                  li {
                        padding-left: 25px;
                        width: fit-content;
                        position: relative;
                        transition: $transition;

                        a {
                              border-top: unset;
                              font-size: 16px;
                              padding: 9px 10px 9px 0;
                              background-image: unset;
                              transition: $transition;
                        }

                        &:hover {
                              padding-left: 35px;

                              a {
                                    font-weight: bold;
                                    color: #000;
                              }

                              &:before {
                                    width: 25px;
                              }
                        }

                        &:before {
                              content: "";
                              @include absolute(0, auto, 0, 0);
                              width: 15px;
                              height: 1px;
                              color: #000;
                              border-bottom: 1px solid black;
                              background: unset !important;
                              margin-top: auto;
                              margin-bottom: auto;
                              transition: $transition;
                        }
                  }
            }

            /* 1.0 - ul */
            >ul {
                  border-bottom: 1px solid $border-color;
            }

            ul {
                  list-style: none;
                  margin: 0;
                  padding: 0;

                  a {
                        display: block;
                        border-top: 1px solid $border-color;
                        padding: 9px 10px;
                        color: $body-color;
                        line-height: 1.5;

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

                  ul {
                        display: block;
                        border-left: 1px dashed $border-color;
                        margin-left: 15px;
                  }
            }

            select {
                  @extend .form-select;
            }
      }


      /* 2.0 - widget_product_categories */
      .widget_product_categories {
            &#woocommerce_product_categories-2 {
                  @include media-max(sm) {
                        display: none;
                  }
            }

            &#woocommerce_product_categories-3 {
                  @include media-min(sm) {
                        display: none;
                  }
            }

            .cat-parent {
                  position: relative;
                  pointer-events: none;

                  &:after {
                        content: '';
                        @include absolute(0, 0, 0);
                        width: 30px;
                        cursor: pointer;
                        z-index: 2;
                        pointer-events: auto;
                        background-position: right 12px top 16px;
                        background-repeat: no-repeat;
                  }

                  >a {
                        padding-right: 30px;
                        pointer-events: auto;
                  }

                  >ul {
                        display: none;
                        pointer-events: auto;
                  }

                  &.active {
                        &:after {
                              color: $primary-color;
                              transform: rotate(180deg);
                              background-position: left 12px bottom 16px;
                        }
                  }

                  &.current-cat,
                  &.current-cat-parent {
                        &:after {
                              color: $primary-color;
                              transform: rotate(180deg);
                              background-position: left 12px bottom 16px;
                              cursor: default;
                        }

                        >ul {
                              display: block;
                        }
                  }
            }

            .current-cat,
            .current-cat-parent {
                  >a {
                        color: $primary-color;
                  }
            }

            .cat-item-none {
                  border-top: 1px solid $border-color;
                  padding: 9px 10px;
            }
      }
}


/* 3.0 - widget-posts */
.widget-posts__list {
      .widget-post {
            display: flex;
            align-items: center;

            &:not(:first-child) {
                  margin-top: 20px;
            }

            &__img-link {
                  width: 70px;
                  min-width: 70px;
                  margin-right: 15px;
                  @include css3(transition, $transition);

                  &:hover {
                        @include css3(opacity, .75);
                  }
            }

            &__date {
                  font-size: $body-font-size - 2px;
                  margin-bottom: 5px;
            }

            &__h {
                  margin: 0;
                  font-size: $body-font-size;
                  font-weight: $header-font-weight;
                  line-height: 25px;

                  a {
                        color: $header-color;
                        @extend %link-color;
                  }
            }
      }
}