@import './normalize.less';
@import './variables.less';

header{
  border-bottom: 1px solid #ccc;
  padding: 15px 25px;
}
.ub-suggest {
  position: relative;
  width: 400px;
  &-input {
    font-size: 14px;
    font-weight: normal;
    padding: 5px 15px;
    width: 100%;
  }
  &-list {
    position: absolute;
    background: @white;
    list-style: none;
    margin: -1px 0 0;
    padding: 0;
    border: 1px solid @gray;
    display: block;
    width: 100%;
    .ub-suggest-item {
      padding: 0;
      font-size: @font-base;
      .ub-suggest-link {
        color: @dark-gray;
        text-decoration: none;
        text-transform: capitalize;
        padding: 5px;
        display: block;
        .ub-suggest-thumb {
          width: 35px;
          height: 35px;
          vertical-align: middle;
        }
      }
      &.focused{
        .ub-suggest-link {
          color: @white;
          background: @gray;
        }
      }
    }
  }
}

.facets {
  float: left;
  width: 15%;
}

.container {
  &::after {
    content: "";
    clear: both;
    display: table;
  }
}

.ub-facet {
  padding: 10px;
  &-title {
    font-weight: bold;
    text-transform: capitalize;
    padding: 15px 10px;
  }
  &-item {
    margin: 10px 0;
    font-size: @font-base;
    label {
      text-transform: capitalize;
      .ub-facet-input {
        margin-right: 7px;
      }
    }
  }
  &-search{
    padding: 15px 0 0;
    &-box{
      padding: 5px 20px;
      font-size: @font-base;
      width: 100%;
    }
  }
  &-toggle{
    font-size: ceil(@font-base - 1);
  }
}

.ub-search {
  float: right;
  width: 83%;
  margin-right: 2%;
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.ub-product {
  width: 250px;
  padding: 5px 10px;
  margin: 15px;
  font-size: @font-base;
  display: inline-block;
  &-image {
    text-align: center;
    margin: 0;
    img {
      width: 200px;
    }
  }
  &-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 15px;
    margin: 5px 0;
    &:first-letter {
      text-transform: capitalize;
    }
  }
  &-offer{
    color: #ee5f73;
    margin: 5px 0;
    height: 15px;
  }
  &-strike-price{
    text-decoration: line-through;
    color: #999;
    font-size: 12px;
  }
  &-info {
    .ub-product-link {
      float: right;
      text-decoration: none;
      border: 1px solid #aaa;
      padding: 5px 15px;
      vertical-align: middle;
      line-height: 12px;
      font-size: 12px;
      background: #aaa;
      color: #fff;
      border-radius: 6px;
    }
  }
  &-variants{
    text-align: center;
    margin: 5px 0;
    &-color{
      display: inline-block;
      margin: 0 5px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      border: 1px solid @gray;
      cursor: pointer;
    }
  }
}