.paragraph--type--location-filter-by-amenities {
  .field-amenities-filter {
    .views-field-title {
      font-size: 16px;
      a {
        color: $white;
        @include cachet();
      }
    }
  }

  h2 {
    margin-top: 0;
    margin-bottom: 25px;
  }

  .field-amenities-icon {
    background-color: $white;
    border-radius: 32px;
    padding: 4px;
    width: 32px;
    height: 32px;
    overflow: hidden;
    svg {
      * {
        fill: $dark-green-aa;
      }
    }
  }

  .views-element-container {
    margin: 0 15px 40px;
    legend {
      color: $default-grey;
    }
    form {
      margin-bottom: 1em;
      .webform-options-display-one-column.form-checkboxes {
        -webkit-columns: 2;
        -moz-columns: 2;
        columns: 2;
        @media (max-width: $screen-phone) {
          -webkit-columns: 1;
          -moz-columns: 1;
          columns: 1;
        }
        @media (min-width: $screen-tablet) {
          -webkit-columns: 2;
          -moz-columns: 2;
          columns: 2;
        }
        @media (min-width: $screen-desktop) {
          -webkit-columns: 4;
          -moz-columns: 4;
          columns: 4;
        }
      }
      .form-item {
        margin: 0 0 5px;
        @media (max-width: $screen-md-min - 1) {
          .js-form-type-checkbox {
            background-color: $lighter-grey;
            display: inline-block;
            margin: 5px 5px 5px 0;
            padding: 5px 5px 0;
          }
        }
        input.form-checkbox {

        }
        .field-amenities-icon {
          padding: 2px;
          width: 30px;
          height: 30px;
          margin: 0 4px;
        }
        label {
          @media (max-width: $screen-md-min - 1) {
            margin-bottom: 0;
          }
          .field-amenities-icon-wrapper {
            vertical-align: middle;
          }
          .term-name {
            @media (max-width: $screen-phone) {
              width: auto;

              font-weight: bold;
            }
            @media (min-width: $screen-tablet) {
              width: auto;
              font-weight: normal;
            }

            @media (min-width: $screen-desktop) {
              width: 155px;
            }
            @media (min-width: $screen-lg-desktop) {
              width: auto;
            }
          }
          div {
            display: inline-block;
            svg {
              * {
                fill: $blue;
                color: $green-aa;
              }
            }
          }
        }
      }
      input[type="submit"] {
        display: none;
      }
    }
  }

}

// Modify responsive behavior for Location Page with Amenities filter so that
// amenities formatting doesn't break on tablets.
@media (max-width: $screen-md-min) {
  .sidebar-region.col-sm-4:has(.paragraph--type--location-filter-by-amenities) {
    width: 100%;
  }

  .main-region.col-sm-8:has(+ .sidebar-region.col-sm-4 .paragraph--type--location-filter-by-amenities) {
    width: 100%;
  }
}
