MontrealNewTech/website

[data-controller=community_events][data-action=index] {
  .event {
    background-color: $lightest-grey;
    border-radius: $base-border-radius;
    padding: $little-space $med-space;

    &:not(:last-child) {
      margin-bottom: $large-space;
    }
  }

  .meta {
    font-family: $headers;
    font-size: $subtext-font-size;
    padding: $little-space 0;

    .header {
      margin: 0;

      @include above($small-screen) {
        font-size: $large-font-size;
      }
    }

    p {
      padding: 0;
      margin: 0;
    }

    a {
      display: block;
    }

    .map {
      color: $main-color;
    }
  }

  .accordion-tabs {
    margin-top: 0;
  }

  .calendar-buttons {
    @include flex-column-then-row;
    padding-top: $large-space;

    a {
      flex: 1;
      text-align: center;

      @include above($small-screen) {
        &:not(:first-child) {
          margin-left: $med-space;
        }

        &:not(:last-child) {
          margin-right: $med-space;
        }
      }
    }
  }

  .date-nav {
    @include flex-center-between;
    background-color: $very-light-grey;
    padding: $little-space $med-space;
    margin-top: $xl-space;

    h2 {
      padding: 0;
      text-align: center;
    }

    a {
      text-transform: uppercase;

      .text {
        @include on($small-screen) {
          display: none;
        }
      }
    }
  }

  .weekday {
    display: block;
    font-size: $small-font-size;
    text-transform: uppercase;
  }

  .tab-link {
    @include above($medium-screen) {
      width: 14.04%;
    }
  }

  .description {
    font-size: $subtext-font-size;

    a {
      color: $main-color;
    }
  }
}