@import "colors.less";

//SEARCH
#search {
  position: relative;
  div {
    .panelBox {
      position: absolute;
      top: 2rem;
      left: 0;
      max-height: 80vh;
      overflow: auto;
    }
  }
}

.searchResults {
  position: absolute;
  left: 0;
  bottom: 1rem;

  .result {
    ul {
      margin: 0;
      li {
        ul {
          h3 {
            padding: .5rem 1rem;
            background-color: var(--secondary);
            color: @white;
          }

          li {
            margin-left: 1.5rem;
            justify-content: left !important;

            a {
              .fx;
              .fxi;

              picture {
                height: 50px;
                width: 10rem;
                min-width: 10rem;
                max-width: 10rem;
                overflow: hidden;

                img {
                  .border(.5rem);
                  height: 100%;
                  width: 100%;
                  object-fit: cover;
                }
              }

              &:hover, &:focus {
                picture {
                  img {
                    .scale;
                    .time;
                  }
                }

                h4 {
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
    }
  }
}

.search_widget {
  z-index: 20;
  height: 100%;
  padding-left: .5rem;
  border-top-left-radius: .5rem;
  border-bottom-left-radius: .5rem;

  .radiusRight;
  .fx;
  .fxa;
  .fxc;
  transition-duration: 0.3s;

  &:hover, &:focus-within {
    form {
      transform: scaleX(1);
      background-color: @white;

      input[type="search"] {
        transform: scaleX(1);
      }
    }
  }

  .fa {
    color: @white;
    padding-left: 1rem;
  }

  form {
    transform-origin: right;
    .time;
    transform: scaleX(0);

    input[type="search"] {
      transform-origin: right;
      .time;
      transform: scaleX(0);
      background-color: @white;

      &:focus {
        transform: scaleX(1);
        border-color: @primary1;
      }
    }
  }

  .searchResults {
    .panelBox {
      ul {
        li {
          align-items: flex-start;
        }
      }
    }
  }
}
//SEARCH END

//SIDE widgets
.widget {
    //display: inline-block;
    height: 0;
    position: sticky;
    top: 30rem;
    left: 0;
    z-index: 15;
    min-width: 3rem;
    max-width: 5rem;
    //min-height: 2rem;
}
.widget_button {
    background-color: var(--primary);
    color: @white;
    .radiusRight;
    .shadow;
    border: none;
    padding: 1rem 2rem;
    z-index: 10;
    border: .5px solid var(--primary);
    display: inline-block;
    &:hover, &:focus{
      background-color: var(--secondary);
      color: @white;
      border: .5px solid @black;
    }
}

#filters.uk-offcanvas {
    top: 14rem;
    .uk-offcanvas-bar {
        border-top-right-radius: 2rem;
        overflow: hidden;
        overflow-y: scroll;
    }
}

.off-canvas-cat {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
    top: 30rem; //uk-sticky="offset: 300
    max-height: -webkit-fit-content;
    max-height: -moz-fit-content;
    max-height: fit-content;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    button {
        margin-bottom: 3rem;
        &:hover, &:focus {
            svg {
                color: var(--primary);
            }
        }
    }
    ul {
        li {
            a:hover,
            a:focus {
                color: var(--primary);
            }
            .active {
                color: var(--primary);
                &:hover,
                &:focus {
                    color: @white;
                }
            }
        }
    }
}

#product_filter_button_wrap {
    width: 5rem;
}
//SIDE widgets END

.sort_widget_wrapper {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 3rem;
    margin-bottom: 1rem;
    .sort_widget {
        display: inline-block;
        height: 100%;
    }
}

.entityItem{
    picture{
        border-radius: 50%;
        background-color: #f8f8f8;
        &::after{
            content: none;
        }
        img {
            .radiusAngel;
        }
    }
    .entityItemClass{
        background-color: var(--primary);
        color: @white;
        padding: .5rem 2rem;
        border-bottom-left-radius: 2rem;
        border-top-right-radius: 2rem;
        z-index: 20;
    }
    p{
        margin-left: 2rem;
    }
}

//Basket
#basket {
    .basket_item {
        padding: .5rem !important;
    }
    .uk-navbar {
        background-color: transparent;
        li .uk-navbar-dropdown {
            width: 20rem;
            a {
                color: @black;
                font-size: 1.3rem;
            }
            img {
                height: 8rem;
            }
        }
        input {
            color: @black !important;
            padding: .5rem;
            font-size: 1.3rem;
            height: auto;
        }
    }
    .button_basket {
        font-size: 1.8rem;
        div {
            position: relative;
            .uk-badge{
                position: absolute;
                top: -.5rem;
                right: -1rem;
                color: @white;
            }
        }
    }
}

#scrollUp {
    position: fixed;
    display: block;
    right: 5rem;
    bottom: 5rem;
    width: 3rem;
    height: 4rem;
    background: #000000;
    text-align: center;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    opacity: .4;
    z-index: 100;
    border-bottom-left-radius: 1rem;
    border-top-right-radius: 1rem;
    svg {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}