@import 'src/assets/styles/variables';

.input-container {
  margin-bottom: 24px;

  .date-picker-input {
    margin-bottom: 0;

    label {
      line-height: 30px;
      color: $tf-dark-gray;
    }

    input {
      height: 30px;
      border: 1px solid $tf-medium-gray;
      border-radius: 2px;
      color: $tf-dark-gray;
      padding-left: 15px;
      padding-right: 24px;
      width: 116px;
    }
  }
}

// This is for styles using <datepicker />
/* stylelint-disable selector-max-compound-selectors */
/* stylelint-disable max-nesting-depth  */
.datepicker-container {
  margin-top: 35px;

  .el-input__inner {
    color: $tf-blue;
  }

  .calendar_content {
    height: 306px !important; // stylelint-disable-line
  }

  .datepicker-calendar {
    display: inline-block;
    position: relative;
    margin-right: 15px;

    .el-button {
      font-size: 12px;
      font-weight: 600;
      font-style: normal;
      font-stretch: normal;
      line-height: normal;
      letter-spacing: normal;
      color: $tf-blue;
      position: absolute;
      bottom: 15px;
      left: 25px;
      padding: 0;
    }
  }

  .week-picker,
  .vdp-datepicker {
    display: inline-block;
  }

  .date-picker-input {
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: $tf-dark-gray;
    display: inline-block;
  }

  .week-picker {
    width: 117px;
    height: 279px;
    box-sizing: border-box;
    padding: 18px 15px 0;
    background-color: $tf-extra-light-gray-2;
    vertical-align: top;

    .el-button {
      font-size: 14px;
      padding: 9px 15px 9px 0;
      font-weight: 600;
      font-style: normal;
      font-stretch: normal;
      line-height: normal;
      letter-spacing: normal;
      color: $tf-blue;
    }
  }

  .vdp-datepicker {
    font-size: 12px;

    .today {
      font-weight: bold;
      color: $tf-dark-gray;
    }
  }

  .vdp-datepicker__calendar {
    width: 258px;
    height: 281px;
    padding: 6px 16px;
    border-radius: 2px;
    box-shadow: 0 0 6px 0 rgba($tf-black, .04), 0 2px 4px 0 rgba($tf-black, .12);
    border: solid 1px $tf-extra-light-gray-1;

    .cell {
      &:not(.month):not(.year) {
        height: 32px;
        width: 32px;
        line-height: 30px;
        border-radius: 50%;
      }

      &.selected {
        background: $tf-blue;
        color: $tf-white;
        font-weight: bold;

        &:hover {
          background: $tf-blue;
          border-color: $tf-blue;
        }
      }

      &:not(.blank):not(.disabled).day:hover,
      &:not(.blank):not(.disabled).month:hover,
      &:not(.blank):not(.disabled).year:hover {
        border-color: $tf-dark-blue;
      }
    }
  }

  .vdp-datepicker__calendar header .prev:after,
  .vdp-datepicker__calendar header .next:after {
    border: 0 !important; // stylelint-disable-line
    width: 20px;
    height: 20px;
    fill: $tf-blue;
    background-repeat: no-repeat;
  }

  .vdp-datepicker__calendar header {
    line-height: 43px;
  }

  .vdp-datepicker__calendar header .prev:not(.disabled):hover,
  .vdp-datepicker__calendar header .next:not(.disabled):hover,
  .vdp-datepicker__calendar header .up:not(.disabled):hover {
    background: transparent;
  }

  .vdp-datepicker__calendar header .prev:after {
    background-image: url("data:image/svg+xml,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' width='512' height='512'%3E%3Cpath fill='%232638a6' d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 20px 20px;
  }

  .vdp-datepicker__calendar header .prev.disabled:after {
    background-image: url("data:image/svg+xml,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' width='512' height='512'%3E%3Cpath fill='%23c1c1c1' d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z'%3E%3C/path%3E%3C/svg%3E");
  }

  .vdp-datepicker__calendar header .next:after {
    background-image: url("data:image/svg+xml,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' width='512' height='512'%3E%3Cpath fill='%232638a6' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 20px 20px;
  }

  .day__month_btn,
  .month__year_btn {
    font-size: 14px;
    font-weight: 600;
    color: $tf-blue;
  }

  .vdp-datepicker__calendar .cell.day-header {
    font-size: 12px;
    color: $tf-light-gray;
    display: inline;
  }

  .vdp-datepicker__calendar .cell.disabled {
    color: $tf-light-gray;
  }
}
/* stylelint-enable selector-max-compound-selectors */
/* stylelint-enable max-nesting-depth  */