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

@mixin transition($name, $duration, $easing) {
  -webkit-transition: $name $duration $easing;
  -moz-transition: $name $duration $easing;
  -o-transition: $name $duration $easing;
  transition: $name $duration $easing;
}

.transition-left {
  @include transition(left, 0.2s, linear);
}

.transition-height {
  @include transition(height, 0.2s, ease-in-out);
}

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

  .dp-container {
    .dp-content {
      position: relative;
    }
  }

  /* Absolute positionning */
  .dp-prev {
    left: 0.275rem;
  }

  .dp-next {
    right: 0.275rem;
  }

  .dp-prev,
  .dp-next {
    position: absolute;
    z-index: 1;
    top: 0.15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2rem;
    width: 2rem;
    border-radius: 1rem;
    background-color: $white;

    &:hover {
      background-color: $HOVERED_COLOR;
      cursor: pointer;
    }

    .dp-prev-content,
    .dp-next-content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 2rem;
      width: 2rem;
      font-size: 1.5rem;
      color: $primary;
    }
  }

  .dp-weekdays-container {
    position: absolute;
    top: 3rem;
    display: flex;
    flex-direction: row;
  }

  .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-months-container {
    overflow: hidden;

    .dp-months-content {
      position: relative;
      display: flex;
      left: -($MONTH_WIDTH + (2 * $MARGIN_BETWEEN_MONTHS));

      .dp-month {
        width: $MONTH_WIDTH;
        min-width: $MONTH_WIDTH;
        margin-left: $MARGIN_BETWEEN_MONTHS;
        box-sizing: border-box;
        position: relative;

        .dp-month-name {
          font-size: 1rem;
          text-align: center;
          @include font-weight(700);
          color: $header-copy;
          padding-top: 0.5rem;
          padding-bottom: 2.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;
                  color: $header-copy;
                  transition: all .3s;
                }
              }

              &.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 {
                @include hover-focus() {
                  cursor: pointer;
                  outline: none;

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

                &:focus {
                  .dp-day {
                    .dp-day-inside {
                      outline: 1px solid $navy;
                      box-shadow: inset 0 0 0 2px map-get($button-focus-colors, "secondary");                      
                    }
                  }
                }
              }

              &.hoverable-border {
                @include hover-focus() {
                  cursor: pointer;
                  outline: none;

                  .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%);
              }
            }
          }
        }
      }
    }
  }
}