@import "../../../assets/scss/variables";


$cell-height: 43px;

.calendar-month {
  width: 100%;

  .calendar-head {
    width: 100%;
    align-items: center;
    height: 65px;

    .month {
      padding-top: 3px;
      color: $main-color;
      font-size: 1.3rem;
      font-weight: bold;
      text-transform: uppercase;
      width: 140px;
      text-align: center;
    }

    .next {
      cursor: pointer;
      filter: brightness(0) saturate(100%) invert(9%) sepia(68%) saturate(5303%) hue-rotate(246deg) brightness(63%) contrast(121%);;
      order: 1;
    }

    .prev {
      cursor: pointer;
      transform: rotate(180deg);
      filter: brightness(0) saturate(100%) invert(9%) sepia(68%) saturate(5303%) hue-rotate(246deg) brightness(63%) contrast(121%);;
    }
  }

  .calendar-body {
    width: 100%;

    tr {
      height: $cell-height;
    }

    td {
      padding: 4px;

      span {
        display: flex;
        height: calc(#{$cell-height} - 8px);
        width: 100%;
        justify-content: center;
        align-items: center;

      }
    }

    .calendar-day-name, .calendar-day {
      text-align: center;
      color: black;
      position: relative;
    }


    .calendar-day-name {
      font-size: 1.3rem;
      font-weight: normal;
      text-transform: uppercase;
      color: $main-color;
    }

    .calendar-day {
      font-size: 1.2rem;
      font-weight: normal;

      &:not(.inMonth) {
        color: #E1E1E1;
      }

      &.hasEvent {
        cursor: pointer;

        &:after {
          background-color: #1A73E8;
          color: white;
          content: "";
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          top: 3px;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      &.hide {
        span {
          display: none;
        }
      }

      &.today {
        border: 2px solid #1A73E8;
      }
    }
  }

  .events {

    border-top: 1px solid #ccc;
    padding: 0 20px;
    max-height: 200px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 10px;
    }

    /* Track */
    &::-webkit-scrollbar-track {
      margin: 10px 0;
      background: #f1f1f1;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: $main-color;

    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
      //background: #555;
    }

    .event {
      padding: 17px 0;
      border-bottom: 1px dashed #ccc;


      h4 {
        color: $main-color;
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 4px;
        text-transform: uppercase;
      }

      p {
        color: $main-color;
        font-size: 1.2rem;
        font-weight: bold;
        text-transform: uppercase;
      }
    }
  }
}