@import "variables";
@import "mixins";

$order-by-bg: #eff2ff;

.archive {
  .products-wrp {
    .products-col {
      @include bp(md) {
        flex-direction: row !important;
        flex-wrap: wrap;
      }
      #products-sidebar {
        @include bp(md) {
          flex-basis: calc(50% - 0.8rem);
          flex-grow: unset;
          max-width: calc(50% - 0.8rem);
        }
      }
    }
    #products-main {
      #applied-filters {
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        gap: 1.6rem;
        margin-bottom: 2.4rem;
        flex-wrap: wrap;
        .selected-filter {
          border-radius: 0.8rem;
          padding: 0.8rem 1.6rem;
          background-color: $white;
          box-shadow: 0 0.5px 4px 0 hsla(236, 8%, 41%, 0.1);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: 0.4rem;
          position: relative;
          flex-wrap: wrap;
          min-width: 120px;
          @include bp(md) {
            flex: 1;
          }
          .remove-filter {
            position: absolute;
            top: 0.8rem;
            right: 1.6rem;
            background: none;
            border: none;
            padding: 0;
            transition: 0.3s;
            transform-origin: center;
            width: 16px;
            min-width: 16px;
            height: 16px;
            min-height: 16px;
            &:hover {
              transform: rotate(90deg);
            }
          }
          .filter-label {
            font-size: $fs-h5;
            font-weight: $fw-bold;
            color: $black;
            max-width: 80%;
            text-transform: uppercase;
          }
          .filter-value {
            color: $gray500;
            font-size: $fs-mini;
            font-weight: $fw-regular;
          }
        }
      }
    }
    .order-by-wrap {
      background-color: $order-by-bg;
      border-radius: 0.8rem;
      padding: 1.6rem;
      @include bp(md) {
        flex-basis: calc(50% - 0.8rem);
        flex-grow: unset;
        min-width: fit-content;
        padding: 0.8rem;
        width: 100%;
        justify-content: center;
      }
      #rc-product-count {
        @include bp(xl) {
          display: none;
        }
      }
      .woocommerce-ordering {
        @include bp(md) {
          width: 100%;
        }
        .custom-select-wrapper {
          position: relative;
          display: inline-block;
          user-select: none;
          isolation: isolate;
          z-index: 10;
          @include bp(md) {
            width: 100%;
          }
        }
        .custom-select-wrapper select {
          display: none;
        }
        .custom-select {
          position: relative;
          display: inline-block;
          @include bp(md) {
            width: 100%;
          }
        }
        .custom-select-trigger {
          position: relative;
          display: block;
          min-width: fit-content;
          padding: 0.8rem 2rem 0.8rem 0.8rem;
          font-size: $fs-small;
          font-weight: $fw-regular;
          color: $col-prm;
          background: $order-by-bg;
          border-radius: 0.8rem;
          cursor: pointer;
          @include bp(md) {
            width: 100%;
            padding: 0 2rem 0 0;
          }
        }
        .custom-select-trigger:after {
          position: absolute;
          display: block;
          content: "";
          width: 10px;
          height: 10px;
          top: 50%;
          right: 0;
          margin-top: -3px;
          border-bottom: 1px solid $col-prm;
          border-right: 1px solid $col-prm;
          transform: rotate(45deg) translateY(-50%);
          transition: all 0.3s ease-in-out;
          transform-origin: 50% 0;
        }
        .custom-select.opened .custom-select-trigger:after {
          margin-top: 3px;
          transform: rotate(-135deg) translateY(-50%);
        }
        .custom-options {
          position: absolute;
          display: block;
          top: calc(100% + 1rem);
          left: 0;
          right: 0;
          min-width: fit-content;
          border: none;
          border-radius: 0.8rem;
          box-shadow: 0 0.5px 4px 0 hsla(236, 8%, 41%, 0.1);
          box-sizing: border-box;
          background: $white;
          transition: all 0.4s ease-in-out;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          transform: translateY(-15px);
        }
        .custom-select.opened .custom-options {
          opacity: 1;
          visibility: visible;
          pointer-events: all;
          transform: translateY(0);
        }
        .custom-option {
          position: relative;
          display: block;
          margin: 0.8rem;
          padding: 0.4rem 0;
          border-bottom: 1px solid $gray500;
          font-size: $fs-small;
          font-weight: $fw-regular;
          color: $gray500;
          cursor: pointer;
          transition: all 0.3s ease-in-out;
        }
        .custom-option:first-of-type {
          border-radius: 4px 4px 0 0;
        }
        .custom-option:last-of-type {
          border-bottom: 0;
          border-radius: 0 0 4px 4px;
        }
        .custom-option:hover,
        .custom-option.selection {
          color: $col-prm;
        }
        .orderby-wrapper {
          position: relative;
          display: flex;
          box-sizing: border-box;
          gap: 0.8rem;
          align-items: center;
          @include bp(md) {
            width: 100%;
          }
        }
        .radio {
          flex: 1 1 auto;
          text-align: center;
          margin: 0;
        }
        .radio input {
          display: none;
        }
        .radio .name {
          display: flex;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          border-radius: 0.4rem;
          border: 1px solid $gray500;
          padding: 0.2rem 1.1rem;
          color: $gray500;
          font-size: $fs-small;
          font-weight: $fw-regular;
          transition: all 0.3s ease-in-out;
        }

        .radio input:checked + .name,
        .radio input:hover + .name {
          border-color: $col-prm;
          color: $col-prm;
        }
      }
    }
  }
}
