@import (reference) "~assets/styles/shared";

.FilterDropdowns__container {
  display: flex;
  flex-flow: row wrap;

  @media @breakpoint-mobile {
    flex-direction: column;
    margin-bottom: 0.75rem;
  }
}

.FilterDropdowns {
  > div {
    display: flex;
    flex-flow: row wrap;
    margin-right: 1.5rem;
    padding-left: 0;
  }

  @media @breakpoint-mobile {
    align-items: center;
    flex-flow: row wrap;
  }

  > div > button:first-child {
    &:extend(.caps--medium);

    color: @color-white;
  }

  > div > i {
    font-size: 1.5rem;
  }

  > div > div > button:first-child {
    &:extend(.caps--medium);

    color: @color-white;
    white-space: nowrap;
  }

  > div > div > svg {
    height: 18px;
    width: 17px;

    > path {
      stroke: @color-lightgray;
    }
  }

  > div > div {
    margin-right: 1.625rem;
  }

  @media @breakpoint-mobile {
    align-items: center;
    flex-flow: row wrap;
  }
}

.FilterDropdowns__checkboxes {
  align-items: center;
  color: @color-white;
  display: flex;
  flex-direction: row;
  margin-top: 0.8125rem;
  padding-left: 0.5rem;

  > div {
    align-items: center;
    display: flex;

    > div {
      width: 25px;
    }

    > label {
      font-size: @font-size-medium;
      font-weight: 400;
      margin-bottom: 0;
      padding-left: 0.25rem;
      white-space: nowrap;
    }

    > label:nth-of-type(2) {
      margin-top: -10px;
      width: 30px;
    }
  }

  @media @breakpoint-mobile {
    padding: 0 0 1rem;
  }

  @media @breakpoint-mobile-small {
    > div:last-of-type {
      margin-top: 0.5rem;
    }
  }
}
