@use "00-base/configure" as *;

.ma__press-filters {

  .pre-content > &,
  .post-content > &,
  .main-content--full .page-content > & {

    @include ma-container();
  }

  @media ($bp-small-max) {
    margin-left: -20px;
    margin-right: -20px
  }

  &__heading {

    .ma__colored-heading {
      margin: 0;
      padding-left: 20px;
      padding-right: 20px;

      @media ($bp-medium-min) {
        padding-left: 30px;
        padding-right: 30px;
      }

      &:after {
        display: none;
      }
    }
  }

  &__form {
    padding: 20px 20px 30px;

    @media ($bp-medium-min) {
      padding: 30px 30px 45px;
    }
  }

  &__organizations {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    padding-bottom: 15px;
    margin-bottom: 15px;

    @media ($bp-small-min) {
      padding-bottom: 30px;
      margin-bottom: 30px;
    }
  }

  &__topic,
  &__type {
    margin-bottom: 15px;

    @media ($bp-small-min) {
      margin-bottom: 30px;
    }
  }

  &__date {
    margin-bottom: 30px;
  }

  .ma__select-box {
    max-width: 500px;
    width: 100%;
  }

  &__clear {

    @include ma-button-reset;
    font-size: $fonts-smaller;
    display: inline-block;
    line-height: 1em;
    margin: 40px 0 0;
    border-bottom: 3px solid transparent;
    border-bottom-width: 1px;
    transition: border 0.2s;

    &:hover {
      border-bottom-width: 3px;
    }
  }
}

//theme

.ma__press-filters {

  &__container {
    background-color: $c-bg-section;
  }

  &__organizations {
    border-bottom-color: $c-bd-divider;
  }

  label, 
  legend {
    color: $c-font-detail;
  }

  &__clear {
    color: $c-font-base;
    font-weight: $fonts-bold;
    border-bottom-color: $c-font-base;
  }
}