$react-next-dates-theme: () !default;

$react-next-dates-theme: map-merge(
  (
    color-primary: #2979ff,
    color-grey: #6b6d77,
    color-light-grey: #f2f2f2,
    color-dark-grey: #2c2e3d,
    color-white: #ffffff,
    color-dark: #000000,
    font-size-small: 12px,
    font-size-base: 14px,
    font-size-large: 16px,
    font-size-extra-large: 18px,
  ),
  $react-next-dates-theme
);

@mixin v($property, $varName) {
  #{$property}: map-get($react-next-dates-theme, $varName);
  #{$property}: var(--#{$varName});
}

.react-next-dates {
  @each $key, $value in $react-next-dates-theme {
    --#{$key}: #{$value};
  }

  @include v(color, color-dark);
  @include v(font-size, font-size-base);

  .navigation {
    > button {
      position: relative;
      height: 32px;
      padding: 0;
      background: none;
      border: none;
      outline: none;
      cursor: pointer;
      border-radius: 100%;
      transition: background 0.15s linear;

      &:before {
        content: '';
        display: block;
        position: absolute;
        top: calc(50% - 4px);
        left: calc(50% - 3px);
        height: 9px;
        width: 9px;
        border-right: 2px solid;
        border-top: 2px solid;
        @include v(border-color, color-grey);
        box-sizing: border-box;
        transform: rotate(45deg);
        transition: border-color 0.15s linear;
      }

      &.prev:before {
        transform: rotate(-135deg);
      }

      &.next:before {
        left: calc(50% - 6px);
      }

      &:hover {
        @include v(background, color-light-grey);

        &:before {
          @include v(border-color, color-dark-grey);
        }
      }
    }
  }

  &.calendar {
    @include v(background, color-white);

    .navigation {
      display: grid;
      align-items: center;
      grid-template-columns: 1fr 32px 32px;
      grid-column-gap: 2px;
      height: 50px;
      padding: 0 5px;

      > div:first-child {
        padding-left: 5px;

        > p {
          position: relative;
          display: inline-block;
          margin: 0;
          padding: 3px 25px 3px 10px;
          border-radius: 100px;
          text-transform: capitalize;
          cursor: pointer;
          @include v(font-size, font-size-large);
          font-weight: 500;
          transition: background 0.15s linear;

          &:after {
            position: absolute;
            right: 10px;
            top: calc(50% - 2px);
            content: '';
            display: block;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            @include v(border-top-color, color-dark);
          }

          &:hover {
            @include v(background, color-light-grey);
          }
        }
      }
    }

    .-today {
      font-weight: bold;
    }

    .-disabled {
      opacity: 0.5;
      cursor: default;
      pointer-events: none;
    }

    .day-header {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      align-items: center;
      height: 25px;
      padding: 0 5px;

      > span {
        @include v(color, color-grey);
        text-align: center;
        text-transform: capitalize;
      }
    }

    .day-grid {
      position: relative;

      .day-grid-content {
        display: grid;
        grid-template: repeat(6, 1fr) / repeat(7, 1fr);
        padding: 5px;

        .day {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border-radius: 100%;

          &:before {
            content: '';
            display: inline-block;
            width: 1px;
            height: 0;
            padding-bottom: 100%;
          }

          &.-selected,
          &.-selected-start,
          &.-selected-middle,
          &.-selected-end {
            @include v(background, color-primary);
            @include v(color, color-white);

            &:hover {
              @include v(background, color-primary);
            }
          }

          &.-selected-start:not(.-selected-end) {
            border-radius: 100% 0 0 100%;
          }

          &.-selected-middle {
            border-radius: 0;
            opacity: 0.6;

            &:hover {
              opacity: 0.7;
            }
          }

          &.-selected-end:not(.-selected-start) {
            border-radius: 0 100% 100% 0;
          }

          &:hover {
            @include v(background, color-light-grey);
          }
        }
      }
    }

    .year-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 5px 2px;
      padding: 5px;

      .year {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 100px;
        height: 35px;

        &.-selected {
          @include v(background, color-primary);
          @include v(color, color-white);

          &:hover {
            @include v(background, color-primary);
          }
        }

        &:hover {
          @include v(background, color-light-grey);
        }
      }
    }

    .month-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 5px 2px;
      padding: 5px;

      .month {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 100px;
        height: 35px;
        text-transform: capitalize;

        &.-selected {
          @include v(background, color-primary);
          @include v(color, color-white);

          &:hover {
            @include v(background, color-primary);
          }
        }

        &:hover {
          @include v(background, color-light-grey);
        }
      }
    }
  }

  &.clock {
    position: relative;
    max-width: 250px;
    @include v(background, color-white);

    .navigation {
      display: grid;
      grid-template-columns: 32px 1fr 32px;
      align-items: center;
      padding-bottom: 5px;

      > p {
        margin: 0;
        text-align: center;
        grid-column: 2;
        @include v(font-size, font-size-extra-large);
      }
    }

    .clock-wrapper {
      position: relative;
      padding-bottom: 100%;

      .clock-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &:before {
          display: block;
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          @include v(background, color-light-grey);
          border-radius: 100%;
        }

        > span {
          position: absolute;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          height: 24px;
          width: 24px;
          @include v(font-size, font-size-small);
          line-height: 1;
          border-radius: 100%;
          cursor: pointer;
          user-select: none;
          z-index: 1;

          &.selected {
            @include v(color, color-white);
          }
        }

        .clock-selection {
          position: absolute;
          top: calc(50% - 1px);
          left: 50%;
          display: block;
          height: 2px;
          width: calc(50% - 32px);
          @include v(background, color-primary);
          transform-origin: left center;

          &.pm {
            width: calc(25% - 12px);
          }

          &:before {
            content: '';
            display: block;
            position: absolute;
            top: -4px;
            left: -5px;
            width: 10px;
            height: 10px;
            @include v(background, color-primary);
            border-radius: 100%;
          }

          &:after {
            content: '';
            display: block;
            position: absolute;
            top: -11px;
            right: -24px;
            width: 24px;
            height: 24px;
            @include v(background, color-primary);
            border-radius: 100%;
          }
        }
      }
    }
  }

  &.popper {
    @include v(background, color-white);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
    z-index: 1000;

    &.date {
      width: 300px;
    }

    &.time {
      width: 220px;
      padding: 5px;
    }
  }
}