.paragraph--type--location-filter-by-amenities {
  .field-amenities-filter {
    .views-field-title {
      font-size: 16px;

      a {
        @include cachet();
        color: $white;
      }
    }
  }

  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 0 40px;

    legend {
      color: $gray-400;
    }

    form {
      margin-bottom: 1em;

      .webform-options-display-one-column.form-checkboxes {
        -webkit-columns: 2;
        -moz-columns: 2;
        columns: 2;

        @include media-breakpoint-up(sm) {
          -webkit-columns: 1;
          -moz-columns: 1;
          columns: 1;
        }

        @include media-breakpoint-up(md) {
          -webkit-columns: 2;
          -moz-columns: 2;
          columns: 2;
        }

        @include media-breakpoint-up(lg) {
          -webkit-columns: 4;
          -moz-columns: 4;
          columns: 4;
        }
      }

      .form-item {
        @include media-breakpoint-down(md) {
          .js-form-type-checkbox {
            background-color: rgba($gray-100, .5);
            border-radius: 8px;
            display: inline-block;
            margin: 5px 5px 5px 0;
            padding: 5px 5px 0;
          }
        }

        margin: 0 0 5px;

        input.form-checkbox {
          width: auto;
          display: inline;
        }

        .field-amenities-icon {
          padding: 2px;
          width: 30px;
          height: 30px;
          margin: 0 4px;
        }

        label {
          @include media-breakpoint-down(md) {
            margin-bottom: 0;
          }

          .field-amenities-icon-wrapper {
            vertical-align: middle;
          }

          .term-name {
            @include media-breakpoint-up(sm) {
              width: auto;
              font-weight: bold;
            }

            @include media-breakpoint-up(md) {
              width: auto;
              font-weight: normal;
            }

            @include media-breakpoint-up(lg) {
              width: 155px;
            }

            @include media-breakpoint-up(xl) {
              width: auto;
            }
          }

          div {
            display: inline-block;

            svg {
              * {
                fill: $blue;
                color: $green-aa;
              }
            }
          }
        }
      }

      input[type="submit"] {
        display: none;
      }
    }
  }
}
