.abc-select {
  @include set-col(s, 4);
  @include set-col(md, 6);
  @include set-col(lg, 3);

  cursor     : pointer;

  background : $white;

  @include rem-size(16);
  font-weight: 300;

  @include media-max(md) {
    display        : flex;
    align-items    : center;
    justify-content: space-between;

    padding-right  : 18px;
    border         : 1px solid $black;
    border-radius  : 0;

    position       : relative;

    &:after {
      content      : '';
      display      : block;

      width        : 5px;
      height       : 5px;

      border-right : 1px solid $black;
      border-bottom: 1px solid $black;

      transform    : rotate(45deg);

      position     : absolute;
      top          : calc(50% - 2.5px);
      right        : 18px;
    }
  }

  &__container {
    position: relative;
    z-index : 10;
    @include media-max(md) {
      display: none;
    }
  }

  &__head {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    align-items    : center;

    border         : 1px solid $black;
    border-radius  : 0;

    padding        : 18px;

    max-width      : 75ch;
    overflow       : hidden;

    &:after {
      content      : '';
      display      : block;

      width        : 5px;
      height       : 5px;

      border-right : 1px solid $black;
      border-bottom: 1px solid $black;

      transform    : rotate(45deg);
    }

  }

  &__body {
    background    : $white;
    overflow      : hidden;
    opacity       : 0;

    pointer-events: none;
    list-style    : none;

    position      : absolute;
    top           : 100%;
    left          : 0;

    box-shadow    : 0 2px 8px 0 $lightgrey;

    transition    : height .4s ease;

    .isOpen & {
      opacity       : 1;
      pointer-events: auto;

      transition    : height .4s ease;
    }
  }

  &__item {
    padding      : 18px;
    border-bottom: 1px solid $black;

    position     : relative;

    &:before {
      content         : '';

      display         : block;
      width           : 5px;
      height          : 100%;

      background      : $black;
      transform-origin: left;

      transform       : scaleX(0);
      transition      : transform .2s ease;

      position        : absolute;
      top             : 0;
      left            : 0;
    }

    &:last-child {
      border: none;
    }

    &[selected="selected"] {
      color: $red;

      &:before {
        transform : scaleX(1);
        background: $red;
      }

    }

    &:focus,
    &:hover {
      &:before {
        background: $black;
        transform : scaleX(1);
      }
    }
  }
}

select {
  -webkit-appearance: none;
  max-width         : 100%;

  @include rem-size(16);
  font-weight       : 300;

  padding           : 18px;
  @include media-min(md) {
    display: none;
  }
}

.m_filters {
  @extend %grid;
  margin-bottom: 60px;
}

.results {
  display      : block;
  margin-bottom: 30px;
}

.notVisible {
  display       : none;
  opacity       : 0;
  visibility    : hidden;
  pointer-events: none;

  position      : absolute;
}

.isVisible {
  display       : block;
  opacity       : 1;
  visibility    : visible;
  pointer-events: visible;
}