@import "variables";
@import "mixins";

section.component-calendar {
  h3.ics-calendar-label {
    text-transform: uppercase;
    font-size: 1.8rem;
    transform: translate(0px, 15px);
    @include bp("md") {
      transform: none;
    }
  }
  a[data-ics-calendar-action="show-past-events"] {
    display: block;
    color: $col-sec;
    margin-bottom: $space-xs;
  }
  .ics-calendar-select {
    border-radius: 100px;
    border-width: 1px;
    float: right;
    font-size: 1.6rem;
    margin: 0 0 $space-xs $space-xs;
    max-width: 185px;
    min-width: 185px;
    width: 185px;
    @include bp("sm") {
      width: 100%;
      max-width: 100%;
      min-width: 100%;
      float: none;
      margin: 0 0 $space-xs;
    }
  }
  thead {
    tr {
      th {
        background-color: transparent;
        text-transform: capitalize;
        font-size: 1.2rem;
        letter-spacing: 5px;
        padding: 2rem 15px 2.5rem !important;
        border: none;
      }
    }
  }
  tbody {
    tr {
      td {
        &.off {
          background: $gray100;
        }
        .day {
          background: transparent;
          span {
            font-size: 1.2rem;
            letter-spacing: 5px;
            color: $black;
            @include bp("md") {
              color: $col-text;
            }
          }
          @include bp("md") {
            background: $gray200;
            width: calc(100% + 30px);
            margin-left: -15px;
          }
        }
        &.today {
          .day {
            background: $col-sec;
          }
        }
        .events {
          .title {
            color: $col-sec;
            font-size: 1.4rem;
            font-weight: $fw-bold;
          }
          .time,
          .end_time {
            font-size: 1.2rem !important;
            font-weight: $fw-regular !important;
          }
          .event {
            .hover_block {
              @include bp("md-up") {
                border-radius: 0.8rem;
                border-width: 1px;
                border-color: $gray300;
                padding: 2rem;
                max-height: 400px;
                max-width: 300px;
                min-width: 300px;
                overflow-y: auto;
                width: auto;
              }
              .date_in_hover_block {
                color: $col-sec;
                font-weight: $fw-regular;
              }
              .title {
                font-size: $fs-h4 !important;
                font-weight: $fw-semi !important;
                text-transform: uppercase;
              }
              a {
                text-transform: none;
                color: $col-text;
                font-weight: $fw-regular;
              }
            }
            @include bp("sm") {
              padding: $space-xs 0;
            }
          }
        }
      }
    }
  }
  .component-subscribe {
    margin-top: 4rem;
    text-align: center;
  }
  .component-calendar-wrap {
    &.list-view {
      max-width: 850px;
      margin: 0 auto;
      .ics-calendar-list-wrapper .ics-calendar-label {
        margin-bottom: $space-xs !important;
        transform: none;
      }
      .ics-calendar-date-wrapper {
        box-shadow: 0px 4px 24px 0px #00000014;
        border-radius: 16px;
        padding: 3.2rem;
        margin-bottom: 2.4rem;
      }
      .title {
        font-size: $fs-h4;
        font-weight: $fw-bold;
      }
    }
  }
  .ics-calendar.r34ics_compact dl.events {
    @include bp("md") {
      display: block;
    }
  }
}
