@import './icons.scss';

// PALETTE

$_gradientGrey: linear-gradient(#fff, #f2f4f7);
$_gradientDarkGrey: linear-gradient(#fff, #dfe3e8);
$_gradientAzure: linear-gradient(#2da1f8, #1789dd);
$_white: #fff;
$_paleGrey: #f0f3f8;
$_silver: #ced0da;
$_cloudyGrey: #b5c0ce;
$_coolGrey: #9098a7;
$_darkGrey: #354052;
$_cerulean: #2da1f8;
$_waterBlue: #1991eb;
$_strawberry: #db242c;

// INPUT VARIABLES

$font-size: 14px !default;
$font-weight: 600 !default;
$font-weight-selected: bold !default;

$input-height: 36px !default;
$input-height-small: 32px !default;
$input-min-width: 150px !default;

$input-font-size: 14px !default;

$input-border-radius: 4px !default;
$input-border-color: $_silver !default;
$input-border-color-hover: $input-border-color !default;
$input-border-color-open: $_cerulean !default;

$input-background: $_gradientGrey !default;
$input-background-hover: $_gradientDarkGrey !default;
$input-background-open: $_gradientDarkGrey !default;

$input-color: $_darkGrey !default;
$input-color-hover: $input-color !default;
$input-color-open: $input-color !default;
$input-color-has-value: $_darkGrey !default;

$input-placeholder-color: $_coolGrey !default;
$input-placeholder-color-hover: $input-placeholder-color !default;

$input-button-icon-color: $_cloudyGrey !default;
$input-button-icon-color-hover: $_coolGrey !default;
$input-button-icon-color-open: $input-button-icon-color !default;

$input-button-icon-size: 15px !default;

$input-button-background: transparent !default;
$input-button-background-hover: transparent !default;

$input-clear-button-icon-size: 13px !default;
$input-clear-button-color: $input-button-icon-color !default;
$input-clear-button-color-hover: $_strawberry !default;

$input-opacity-disabled: .5 !default;

// PICKER VARIABLES

$picker-width: 250px !default;

$picker-color: $_coolGrey !default;
$picker-color-hover: $_darkGrey !default;

$picker-background: $_white !default;
$picker-background-hover: $_paleGrey !default;

$picker-border-radius: 2px !default;
$picker-border-color: #d9dee3 !default;

$picker-box-shadow: 2px 2px 2px $_coolGrey !default;
$picker-arrow-size: 5px !default;

$picker-header-background: $_gradientAzure !default;
$picker-header-background-hover: rgba(0, 0, 0, .075) !default;
$picker-header-color: $_white !default;
$picker-header-border-color: $_cerulean !default;

$picker-current-background: $_paleGrey !default;
$picker-current-background-hover: darken($picker-current-background, 5%) !default;
$picker-current-color: $_darkGrey !default;
$picker-current-color-hover: $picker-current-color !default;

$picker-selected-background: #bad7f2 !default;
$picker-selected-background-hover: $picker-selected-background !default;
$picker-selected-color: $_darkGrey !default;
$picker-selected-color-hover: $picker-selected-color !default;

$picker-disabled-background: $_white !default;
$picker-disabled-color: $_coolGrey !default;

// STYLE

@mixin placeholder {
  &::-webkit-input-placeholder {
    @content;
  }

  &:-moz-placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }
}

// DatePickerInput

.react-datepicker-component {
  position: relative;
  font-size: $font-size;
  font-weight: $font-weight;

  &.is-disabled {
    pointer-events: none;
    opacity: $input-opacity-disabled;
  }

  .react-datepicker {
    margin-left: 5px;
    margin-top: 5px;
    display: inherit;
  }

  .react-datepicker-input {
    position: relative;
    min-width: $input-min-width;
    height: $input-height;
    background: $input-background;
    border: 1px solid $input-border-color;
    border-radius: $input-border-radius;

    &.is-small {
      height: $input-height-small;
    }

    input {
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      box-sizing: border-box;
      padding-left: 15px;
      padding-right: 60px;
      font-size: $input-font-size;
      color: $input-color;
      font-weight: 600;

      &:focus {
        outline: none;
      }

      @include placeholder() {
        color: $input-placeholder-color;
        font-weight: 600;
      }
    }

    .button-wrapper {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;

      .input-button {
        margin: 0 10px;
        background: $input-button-background;
        font-size: $input-button-icon-size;
        border-radius: 0 $input-border-radius $input-border-radius 0;
        cursor: pointer;
        color: $input-button-icon-color;

        &:hover {
          background: $input-button-background-hover;
          color: $input-button-icon-color-hover;
        }
      }

      .clear-button {
        cursor: pointer;
        font-size: $input-clear-button-icon-size;
        color: $input-clear-button-color;

        &:hover {
          color: $input-clear-button-color-hover;
        }
      }
    }

    &:hover {
      background: $input-background-hover;
      border: 1px solid $input-border-color-hover;

      input {
        color: $input-color-hover;

        @include placeholder() {
          color: $input-placeholder-color-hover;
        }
      }

      .button-wrapper .input-button {
        color: $input-button-icon-color-hover;
      }
    }

    &.is-open {
      background: $input-background-open;
      border: 1px solid $input-border-color-open;

      input {
        color: $input-color-open;

        @include placeholder() {
          color: $input-color-open;
        }
      }

      .button-wrapper .input-button {
        color: $input-button-icon-color-open;
      }
    }

    &.has-value input {
      color: $input-color-has-value;
    }
  }
}

// DatePicker

.react-datepicker {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: inline-block;
  font-size: $font-size;
  font-weight: $font-weight;

  &.floating {
    position: absolute;
    z-index: 10000;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .1);
  }

  &.position-top {
    top: auto;
    bottom: 100%;
    margin-bottom: 5px;

    .react-datepicker-container {
      &::after,
      &::before {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: ' ';
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }

      &::after {
        border-top-color: $picker-border-color;
        border-width: $picker-arrow-size;
        margin-left: -1 * $picker-arrow-size;
      }

      &::before {
        border-top-color: $picker-border-color;
        border-width: ($picker-arrow-size + 1);
        margin-left: -1 * ($picker-arrow-size + 1);
      }
    }
  }

  &:not(.position-top) {
    .react-datepicker-container {
      .react-datepicker-top {
        &::after,
        &::before {
          bottom: 100%;
          left: 50%;
          border: solid transparent;
          content: ' ';
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none;
        }

        &::after {
          border-bottom-color: $picker-header-border-color;
          border-width: $picker-arrow-size;
          margin-left: -1 * $picker-arrow-size;
        }

        &::before {
          border-bottom-color: $picker-border-color;
          border-width: ($picker-arrow-size + 1);
          margin-left: -1 * ($picker-arrow-size + 1);
        }
      }
    }
  }

  .react-datepicker-container {
    width: $picker-width;
    position: relative;

    .react-datepicker-top {
      text-align: center;
      background: $picker-header-background;
      color: $picker-header-color;
      border-top: 1px solid $picker-header-border-color;
      border-left: 1px solid $picker-header-border-color;
      border-right: 1px solid $picker-header-border-color;
      border-top-left-radius: $picker-border-radius;
      border-top-right-radius: $picker-border-radius;

      .week-days {
        height: 35px;

        .week-day {
          cursor: default;
          font-weight: 400;
          font-size: 13px;
        }
      }

      .display {
        height: 35px;

        .react-datepicker-button {
          text-decoration: none;
          padding: 4px;
          text-align: center;
          font-size: 15px;
          letter-spacing: .5px;
          cursor: pointer;

          &.button-left {
            font-size: 13px;
            padding: 4px 16px;
            border-top-left-radius: $picker-border-radius;
          }

          &.button-right {
            font-size: 13px;
            padding: 4px 16px;
            border-top-right-radius: $picker-border-radius;
          }

          &:hover {
            background: $picker-header-background-hover;
            border-radius: 4px;
          }

          &.fixed:hover {
            background: transparent;
            cursor: default;
          }
        }
      }
    }

    .react-datepicker-body {
      border-left: 1px solid $picker-border-color;
      border-right: 1px solid $picker-border-color;
      border-bottom: 1px solid $picker-border-color;
      border-bottom-right-radius: $picker-border-radius;
      border-bottom-left-radius: $picker-border-radius;

      .react-datepicker-row {
        margin-top: 0;
        width: 100%;
        min-height: 30px;

        &:not(:last-child) {
          border-bottom: 1px solid $picker-border-color;
        }

        &:last-child .react-datepicker-picker {
          &:first-child {
            border-bottom-left-radius: $picker-border-radius;
          }

          &:last-child {
            border-bottom-right-radius: $picker-border-radius;
          }
        }

        .react-datepicker-picker {
          color: $picker-color;
          background: $picker-background;
          cursor: pointer;
          text-decoration: none;
          font-weight: 400;

          &:not(:last-child) {
            border-right: 1px solid $picker-border-color;
          }

          &.day {
            min-height: 30px !important;
          }

          &.month {
            min-height: 65px !important;
          }

          &.year {
            min-height: 65px !important;
          }

          &:hover {
            color: $picker-color-hover;
            background: $picker-background-hover;
          }

          &.selected {
            color: $picker-selected-color;
            background: $picker-selected-background;
            font-weight: $font-weight-selected;
          }

          &.current {
            font-weight: 600;
            color: $picker-current-color;
            background: $picker-current-background;

            &:hover {
              color: $picker-current-color-hover;
              background: $picker-current-background-hover;
            }
          }

          &.selected.current {
            color: $picker-selected-color;
            background: $picker-selected-background;
          }

          &.disabled {
            cursor: default;
            color: $picker-disabled-color;
            background: $picker-disabled-background;

            &:hover {
              color: $picker-disabled-color;
              background: $picker-disabled-background;
            }
          }
        }
      }
    }
  }
}