@use 'sass:math';

$width: 15.625em;
$radius: $width * .016891;
$transition: .3s;
$font-size: $width * .056;
$lightblue: lightblue;

/*
  All a user has to do to change the calendar size is
  change the font-size on the container and everything
  magically resizes accordingly. Relative units ftw!
*/
.qs-datepicker-container {
  font-size: 1rem;
  font-family: sans-serif;
  color: black;
  position: absolute;
  width: $width;
  display: flex;
  flex-direction: column;
  z-index: 9001;
  user-select: none;
  border: 1px solid gray;
  border-radius: $radius;
  overflow: hidden;
  background: white;
  box-shadow: 0 ($width * .08) ($width * .08) ($width * -.06) rgba(0,0,0,.3);

  * {
    box-sizing: border-box;
  }
}

.qs-centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.qs-hidden {
  display: none;
}

.qs-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.75);
  color: white;
  width: 100%;
  height: 100%;
  padding: .5em;
  z-index: 1;
  opacity: 1;
  transition: opacity $transition;
  display: flex;
  flex-direction: column;

  &.qs-hidden {
    opacity: 0;
    z-index: -1;
  }

  .qs-overlay-year { // Overlay year input element.
    border: none;
    background: transparent;
    border-bottom: 1px solid white;
    border-radius: 0;
    color: white;
    font-size: $font-size;
    padding: .25em 0;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    display: block;

    // https://goo.gl/oUuGkG
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
  }

  .qs-close {
    padding: .5em;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
  }

  .qs-submit {
    border: 1px solid white;
    border-radius: $radius;
    padding: .5em;
    margin: 0 auto auto;
    cursor: pointer;
    background: rgba(128,128,128,.4);

    &.qs-disabled {
      color: gray;
      border-color: gray;
      cursor: not-allowed;
    }
  }

  .qs-overlay-month-container {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
  }

  .qs-overlay-month {
    display: flex;
    justify-content: center;
    align-items: center;
    width: #{'calc(100% / 3)'};
    cursor: pointer;
    opacity: .5;
    transition: opacity math.div($transition, 2);

    &.active, &:hover {
      opacity: 1;
    }
  }
}

.qs-controls {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 0;
  background: lightgray;
  filter: blur(0px);
  transition: filter $transition;

  &.qs-blur {
    filter: blur(5px);
  }
}

.qs-arrow {
  height: math.div($width, 10);
  width: math.div($width, 10);
  position: relative;
  cursor: pointer;
  border-radius: $radius;
  transition: background .15s;

  &:hover {
    &.qs-left:after {
      border-right-color: black;
    }

    &.qs-right:after {
      border-left-color: black;
    }

    background: rgba(0,0,0,.1);
  }

  &:after {
    content: '';
    border: math.div($width, 40) solid transparent;
    position: absolute;
    top: 50%;
    transition: border .2s;
  }

  &.qs-left:after {
    border-right-color: gray;
    right: 50%;
    transform: translate(25%, -50%);
  }

  &.qs-right:after {
    border-left-color: gray;
    left: 50%;
    transform: translate(-25%, -50%);
  }
}

.qs-month-year {
  font-weight: bold;
  transition: border .2s;
  border-bottom: 1px solid transparent;

  &:not(.qs-disabled-year-overlay) {
    cursor: pointer;
    
    &:hover {
      border-bottom: 1px solid gray;
    }
  }

  &:focus,
  &:active:focus {
    outline: none;
  }
}

.qs-month {
  padding-right: .5ex;
}

.qs-year {
  padding-left: .5ex;
}

.qs-squares {
  display: flex;
  flex-wrap: wrap;
  padding: $width * .02;
  filter: blur(0px);
  transition: filter $transition;

  &.qs-blur {
    filter: blur(5px);
  }
}

.qs-square {
  width: #{'calc(100% / 7)'};
  height: math.div($width, 10);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .1s;

  // Overriden for date-range dates below.
  border-radius: $radius;

  &:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active) {
    &:hover {
      background: orange;
    }
  }
}

// Today's date
.qs-current {
  font-weight: bold;
  text-decoration: underline;
}

/*
  3 possibilities:
    1. Single, active date.
    2. Daterange start selection.
    3. Daterange end selection.
*/
.qs-active,
.qs-range-start,
.qs-range-end {
  background: $lightblue;
}

// Daterange start selection.
.qs-range-start {
  &:not(.qs-range-6) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

// Daterange middle selections.
.qs-range-middle {
  background: lighten($lightblue, 10%);

  &:not(.qs-range-0):not(.qs-range-6) {
    border-radius: 0;
  }

  &.qs-range-0 {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &.qs-range-6 {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

// Daterange end selection.
.qs-range-end {
  &:not(.qs-range-0) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.qs-disabled,
.qs-outside-current-month {
  opacity: .2;
}

.qs-disabled {
  cursor: not-allowed;
}

.qs-empty {
  cursor: default;
}

.qs-day {
  cursor: default;
  font-weight: bold;
  color: gray;
}

.qs-event {
  position: relative;

  &:after {
    content: '';
    position: absolute;
    width: $width * .03;
    height: $width * .03;
    border-radius: 50%;
    background: #07f;
    bottom: 0;
    right: 0;
  }
}