$gray = #666;
$gray-dark = #333;
$gray-light = #999;
$gray-lighter = #F7F7F7;
$off-white = #FCFCFC;
$dot-width = 4px;
$dot-half-width = $dot-width / 2;

html {
  background-color: $gray-lighter;
  font-family: sans-serif;
}

.evt-calendar__container {
  border: 1px solid darken($gray-lighter, 2%);
  overflow: auto;
}

.evt-calendar {
  border-collapse: collapse;
  width: 100%;

  caption,
  &__head {
    background-color: $off-white;
    border-bottom: 1px solid $gray-lighter;
    color: $gray;
    font-weight: normal;
  }

  &__head {
    font-size: 0.7em;
    padding: 0.4em 1.4em;
    .rest,
    .ending {
      display: none;
    }
  }

  &__caption {
    font-size: 0.875em;
    padding-top: 0.5em;
    padding-bottom: 0.3em;
  }

  &__prev-btn,
  &__next-btn {
    background-color: transparent;
    border: none;
    color: $gray-light;
    cursor: pointer;
    float: left;
    font-size: 1em;
    padding: 0.3em 1em .5em;
    text-align: left;
    width: 35%;
    &:hover, &:active {
      background-color: $gray-lighter;
      color: $gray;
    }
    &:focus {
      outline: none;
    }
  }

  &__prev-btn {
    text-align: right;
  }

  &__next-btn {
    float: right;
  }

  tbody {
    tr {
      border-bottom: 1px solid $gray-lighter;
      &:last-of-type {
        border-bottom: none;
      }
    }
  }

  &__cell {
    background-color: $off-white;
    border-right: 1px solid $gray-lighter;
    color: $gray;
    font-size: 0.75em;
    padding: 0;
    position: relative;
    height: 40px;
    width: 150px

    &__event {
      color: $gray-dark;
      display: block;
      padding: 0.5em;
      padding-left: "calc(50% - %s)" % $dot-half-width;

      .event-time,
      .event-name {
        display: none;
      }

      .event-dot {
        background-color: $gray-light;
        border-radius: 50%;
        content: '';
        display: block;
        width: $dot-width;
        height: $dot-width;
      }

      &:first-child {
        padding-top: 1em;
      }

      &:last-child {
        padding-bottom: 1em;
      }
    }

    a {
      text-decoration: none;
      &:hover, &:active {
        color: black;
        text-decoration: underline;
      }
    }

    &__date {
      color: $gray-light;
      font-size: 0.833333333em;
      position: absolute;
      top: 0.3em;
      right: 0.3em;
    }

    &--active {
      background-color: floralwhite;
      &:hover {
        background-color: darken(floralwhite, 2%);
      }
    }

    &--passive {
      background-color: $gray-lighter;
      border-right-color: $off-white;
      color: $gray-light;

      .evt-calendar__cell__event {
        color: $gray;
      }
    }

    &:last-of-type {
      border-right: none;
    }
  }
}

@media (min-width: 375px) {
  .evt-calendar {
    &__head {
      .rest {
        display: initial;
      }
    }

    &__cell {
      &__event {
        padding-left: 0.5em;

        .event-name {
          display: initial;
        }

        .event-dot {
          display: none;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .evt-calendar {
    &__prev-btn,
    &__next-btn {
      width: 42%;
    }

    &__head {
      font-size: 0.875em;
      .ending {
        display: initial;
      }
    }

    &__caption {
      font-size: 1em;
    }

    &__cell {
      height: 60px;

      &__event {
        padding-left: 0.5em;

        .event-time {
          display: initial;
        }
      }
    }
  }
}