sparkbox/local-events-project

.event-filters {
  // filters will be hidden until js loads
  display: none;
  position: relative;

  .js & { display: block; }

  .filters-open &,
  .fixed-top & {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    @media (min-width: $break-large) {
      position: relative;
    }
  }

  .filters-open & {
    height: 100%;
    height: 100vh;

    @media (min-width: $break-large) {
      height: auto;
    }
  }

  &__toggle-button {
    display: block;
    margin: 0;
    padding: ($padding * 3) 0;
    width: 100%;
    background-color: $side-bar-background;
    border: 0;
    border-bottom: $side-bar-divider;
    font-weight: $font-weight-body;
    font-size: 0.75em;
    text-transform: uppercase;
    color: $highlight;
    cursor: pointer;

    @media (min-width: $break-large) {
      display: none;
      visibility: hidden;
    }

    .toggle-arrow {
      stroke: $highlight;
      stroke-width: 1;
      fill: none;
      transform: rotateZ(2deg);
      transition: transform .3s ease-out;

      .filters-open & {
        transform: rotateZ(182deg);
      }
    }
  }


  &__filters {
    padding: 0 ($padding * 4);
    height: 0;
    background-color: $side-bar-background;
    overflow: hidden;
    opacity: 0;
    transition: opacity .3s ease-out;

    .filters-open & {
      height: calc(100% - #{$toggle-filters-button-height});
      opacity: 1;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }

    @media (min-width: $break-large) {
      height: auto;
      opacity: 1;
    }
  }

  &__group {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    margin: ($margin * 4) auto;
    max-width: 35em;
    border: 0;

    &:first-of-type { padding-top: $padding * 4; }
  }

  &__group-heading {
    flex-basis: 100%;
    font-size: 1em;
    font-weight: $font-weight-select;
    text-transform: uppercase;
    margin-bottom: .75em;
    color: $site-topics-color;
  }

  &__checkbox {
    flex-grow: 1;
    flex-basis: auto;
    margin: 0 $margin $margin 0;
    border: 1px solid $highlight;
    font-size: .875em;
    font-weight: $font-weight-body;
    color: $filter-text-color;

    [type='checkbox'] {
      opacity: 0;
      position: absolute;
    }

    [type='checkbox'] {
      &:hover + label,
      &:focus + label { background: $filter-hover-background; }
    }

    [type='checkbox']:checked + label {
      background: $highlight;
      color: $filter-checked-color;
    }

    label {
      display: block;
      padding: ($padding * 1.5) $padding;
      width: 100%;
      height: 100%;
      text-align: center;
      cursor: pointer;
    }
  }
}