@import '../base/helpers';
@import '../variables/calendar';

som-calendar-vertical {
  font-family: $font-family-base;
  font-size: $font-size-sm;

  .som-cv-container {
    height: 100%;
    width: 100vw;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .som-cv-more-button {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dp-weekdays-container {
    display: flex;
    flex-direction: row;
    height: $WEEKDAYS_HEIGHT;
    margin-bottom: 0.5rem;
  }

  .dp-weekdays {
    display: flex;
    flex-direction: row;
    width: $MONTH_WIDTH;

    .dp-weekday {
      display: flex;
      flex: 1;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 0.75rem;
      @include font-weight(700);
      color: $header-copy;
    }
  }

  .dp-month {
    width: $MONTH_WIDTH;
    position: relative;
    border-bottom: 1px solid $border-color;
    padding-bottom: 1.5rem;
    padding-top: 2rem;
    &:first-of-type{
      padding-top: 0;
    }

    .dp-month-name {
      font-size: 1rem;
      text-align: center;
      @include font-weight(700);
      color: $header-copy;
      margin-bottom: 1.5rem;
    }

    .dp-weeks {
      .dp-week {
        flex: 1;
        display: flex;
        flex-direction: row;
        padding-top: 2px;

        .dp-day-box {
          position: relative;
          display: flex;
          flex: 1;
          flex-direction: row;
          justify-content: center;
          align-items: center;

          &:focus {
            z-index: 2;
          }

          &:first-child {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
          }

          &:last-child {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
          }

          .dp-day {
            z-index: 2;

            .dp-day-inside {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              height: $DAY_SIZE;
              width: $DAY_SIZE;
              border-radius: $DAY_SIZE * 0.5;
              border: 2px solid transparent;
            }
          }

          &.boundary {
            .dp-day {
              .dp-day-inside {
                background-color: $navy;
                color: $white;
              }
            }
          }

          &.boundary-bg-start {
            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: 50%;
              width: 50%;
              height: 100%;
              background-color: $HOVERED_COLOR;
            }
          }

          &.boundary-bg-end {
            &::after {
              content: "";
              position: absolute;
              top: 0;
              right: 50%;
              width: 50%;
              height: 100%;
              background-color: $HOVERED_COLOR;
            }
          }

          &.disabled {
            .dp-day {
              .dp-day-inside {
                color: $DISASBLED_COLOR;
              }
            }
          }

          &.hoverable-fill {
            &:hover {
              cursor: pointer;

              .dp-day {
                .dp-day-inside {
                  color: $white;
                  background-color: $navy;
                  // border-color: rgb(113, 113, 113);
                }
              }
            }
          }

          &.hoverable-border {
            &:hover {
              cursor: pointer;

              .dp-day {
                .dp-day-inside {
                  border-color: $navy;
                }
              }
            }
          }

          &.between {
            background-color: $HOVERED_COLOR;
          }

          &.gradient-start {
            background: $HOVERED_COLOR;
            background: linear-gradient(90deg, rgba($HOVERED_COLOR, 0) 0%, rgba($HOVERED_COLOR, 1) 100%);
          }

          &.gradient-end {
            background: $HOVERED_COLOR;
            background: linear-gradient(90deg, rgba($HOVERED_COLOR, 1) 0%, rgba($HOVERED_COLOR, 0) 100%);
          }
        }
      }
    }
  }
}