@sidebar--padding: @gutter--width * 2;

.catalog-category-view {

  .column.sidebar {
    .page-title {
      color: @white;
      display: none;
      margin-bottom: @gutter--width;

      .lt-md({
        .h3;

        display: block;
        hyphens: auto;
        padding-right: @gutter--width / 2;
        padding-left: @gutter--width / 2;
      });
    }

    .lt-md({
      padding: @sidebar--padding 0;
      background-image: url(http://lorempixel.com/g/500/500/abstract/1);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    });
  }

  #layered-filter-block {
    .gt-md({
      height: 100%;
    });

    .lt-md({
      margin-right: @gutter--width / 2;
      margin-left: @gutter--width / 2;
    });
    

    .filter-title,
    .filter-content .filter-subtitle {
      display: none;
    }

    .filter-content {
      height: 100%;

      .filter-options {
        background: @white;
      }

      .filter-actions {
        background: @white;
        margin-top: @gutter--width;

        a {
          .h7;
          .light;
          letter-spacing: .05em;
          color: @champagne;
          display: block;
          text-align: center;
          height: 50px;
          line-height: 50px;
        }
      }
    }

    .filter-options-item {
      .gt-lg({
        margin-right: @sidebar--padding;
        margin-left: @sidebar--padding;
      });
      border-bottom-color: @black-10;
      border-bottom-style: solid;
      border-bottom-width: 1px;

      &.super-filter {
        .lt-md({
          background: @champagne-25;
          border-bottom-color: @white;
        });

        .filter-options-content {
          ol {
            li {
              border-top-color: @white;
            }
          }
        }
      }

      .icon {
        content: '';
        background-image: data-uri('image/svg+xml;charset=UTF-8', @icon--plus);
        background-position: right center;
        background-repeat: no-repeat;
        background-size: @default--space;
        display: block;
        width: 24px;
      }

      &.active {
        .icon {
          background-image: data-uri('image/svg+xml;charset=UTF-8', @icon--minus);
        }
      }

      .filter-options-title {
        .h6;
        padding-top: @sidebar--padding;
        padding-bottom: @sidebar--padding;
        margin-bottom: 0 !important;
        .lt-md({
          padding-right: @sidebar--padding;
          padding-left: @sidebar--padding;
          padding-top: @gutter--width;
          padding-bottom: @gutter--width;
        });
        .md({
          padding-right: @gutter--width;
          padding-left: @gutter--width;
        });
      }

      .filter-options-content {
        ol {
          .gt-md({
            padding-bottom: 20px;
          });
          display: none;

          li {
            .p5;
            padding: (@gutter--width / 4) @sidebar--padding;
            .lt-md({
              border-top-color: @black-10;
              border-top-width: 1px;
              border-top-style: solid;
              padding-left: @sidebar--padding * 2;
              padding-top: @gutter--width;
              padding-bottom: @gutter--width;
            });
            .gt-md({
              margin-right: -@sidebar--padding;
              margin-left: -@sidebar--padding;
            });
            .md({
              margin-right: -@gutter--width;
              margin-left: -@gutter--width;
            });

            &:first-child {
              .gt-md({
                padding-top: 0;
              });
            }

            .count {
              display: none;
            }
          }
        }
      }

      &.active {
        .filter-options-content {
          ol {
            display: block;
          }
        }
      }
    }
  }

  .filter-current {

    .items {
      .clearfix;

      .item {
        background: @white;
        margin-right: @gutter--width;
        margin-bottom: @gutter--width;
        display: block;
        padding: (@gutter--width / 2) @gutter--width;
        float: left;

        .filter-label {
          display: none;
        }

        .filter-value {
          vertical-align: middle;
          margin-right: @gutter--width / 2;
        }

        .action.remove {
          float: right;
        }

      }
    }
  }
}