@import "../utilities/index";

.datepicker-ui {
  @include e(toggle) {
    position: absolute !important;
    right: 0;
    line-height: 1.25;
    padding: 0;

    mat-icon {
      color: var(--color-gray-500);
    }
  }
}

ecabs-date-picker {
  .dateTimeWrapper {
    position: relative;
    display: flex;
    width: 100%;

    .datePart {
      flex: 2;
    }

    .timePart {
      flex: 1;
      padding-left: 10px;
      vertical-align: top;
      max-width: calc-rem(160);

      ecabs-timepicker .timeInputWrapper {
        display: block;
      }

      ecabs-timepicker {
        width: 100%;

        .inputWrapper {
          display: block;
        }
      }
    }

    .dateInputWrapper {
      position: relative;
    }

    input {
      min-height: 42px;
      width: 100%;
      display: block;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: 500;
      padding-left: 10px;
      border-radius: 4px;
      border: 1px solid rgb(107, 109, 115);
      outline: none;
      transition: all 300ms ease-in-out;

      &:disabled {
        border-bottom-width: 1px;
        background-color: var(--color-white-opacity-05);
      }
    }

    input[type='date']::-webkit-calendar-picker-indicator,
    input[type='date']::-webkit-inner-spin-button {
      display: none;
    }

    input[type='date']::-webkit-clear-button {
      display: none;
    }

    .calendar-icon {
      float: right;
      margin-top: -38px;
      padding: 5px 10px 5px 5px;
      display: block;
      font-size: 13px;
      line-height: 20px;
      color: var(--color-gray-500);
      position: relative;
      width: 40px;
      height: 30px;
      cursor: pointer;
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: calc-rem(22);

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

  .ecabs-element-wrapper {
    &.focused {
      label {
        color: #376bfb;
      }

      input {
        border-bottom-width: 2px;
        border-bottom-color: #376bfb;
      }
    }

    &.validationError {
      label {
        color: #ff4c4c;
      }

      input {
        border-bottom-color: #ff4c4c;
        border-bottom-width: 2px;
      }
    }
  }
}

// ------------------------ datepicker component css override --------------

.ng-mydp {
  .myDpSelector {
    border: 0;
    padding: 0;
    box-shadow: 0 4px 6px rgba(22, 42, 76, 0.08),
    0 2px 16px rgba(22, 42, 76, 0.06), 0 8px 12px rgba(22, 42, 76, 0.04);
    border-radius: 0 0 4px 4px;
    background: white;

    &:focus {
      box-shadow: 0 4px 6px rgba(22, 42, 76, 0.08),
      0 2px 16px rgba(22, 42, 76, 0.06), 0 8px 12px rgba(22, 42, 76, 0.04);
    }

    .myDpWeekDayTitle {
      background-color: white;
      font-weight: 500;
      font-size: 11px;
      color: rgba(22, 42, 76, 0.7);
    }

    .myDpNextBtn {
      margin-left: auto;
      margin-right: 16px;

      .myDpIconRightArrow {
        line-height: 26px;
        height: 25px;

        &::before {
          color: #376bfb;
          font-size: 13px;
        }
      }
    }

    .myDpPrevBtn {
      margin-left: 16px;

      .myDpIconLeftArrow {
        line-height: 26px;
        height: 25px;

        &::before {
          color: #376bfb;
          font-size: 13px;
        }
      }
    }

    .myDpMonthYearSelBar {
      height: 52px;
      padding-top: 10px;
      border: 0;
    }

    .myDpMonthYearText {
      button {
        font-weight: 500;
        font-size: 13px;
        line-height: 20px;
        color: #376bfb;
      }

      .myDpMonthBtn {
        padding-right: 7px;
        position: relative;
        margin-right: 15px;

        &::after {
          position: absolute;
          content: '';
          height: 14px;
          width: 1px;
          right: -7px;
          top: 6px;
          background: rgba(22, 42, 76, 0.5);
        }
      }

      .myDpYearBtn {
        padding-left: 6px;
      }
    }

    .myDpCalTable {
      height: calc(100% - 54px);
      width: calc(100% - 20px);
      margin: 0 10px;
    }

    //---------------- days table -------------------------------
    table.myDpCalTable {
      td {
        .myDpDayValue {
          border-radius: 4px;
          background: #f0f2f5;
          display: inline-block;
          box-sizing: border-box;
          width: 32px;
          height: 28px;
          font-size: 13px;
          line-height: 28px;
          text-align: center;
          color: rgba(22, 42, 76, 0.9);

          &.myDpMarkCurrDay {
            border-bottom: 0;
            color: #376bfb;
          }
        }

        &.myDpSelectedDay {
          .myDpDayValue {
            color: white !important;
            background: #6ab72a !important;
          }
        }

        &.myDpDisabled {
          background: unset;

          .myDpDayValue {
            background: unset !important;
            color: rgba(22, 42, 76, 0.5);
            cursor: not-allowed;

            &:hover {
              background: unset !important;
            }
          }
        }

        &.myDpRangeColor {
          background-color: white;

          .myDpDayValue {
            background: #bee39d !important;
          }

          &.myDpSelectedDay {
            .myDpDayValue {
              color: white !important;
              background: #6ab72a !important;
            }
          }
        }

        &.myDpDaycell:focus {
          box-shadow: unset;
          outline: unset;
        }

        &.myDpPrevMonth,
        &.myDpNextMonth {
          .myDpDayValue {
            background: #f6f7f9;
            color: rgba(22, 42, 76, 0.5);
          }
        }

        .myDpDimDay {
          opacity: 1;
        }
      }

      .myDpTableSingleDay:hover {
        background-color: white;

        .myDpDayValue {
          background: #bee39d;
          color: rgba(22, 42, 76, 0.9);
        }
      }

      .myDpSelectedDay,
      .myDpSelectedMonth,
      .myDpSelectedYear {
        background-color: white;
        border-radius: 0;
      }
    }

    //================== months table =====================
    .myDpMonthTable {
      height: 128px;
      width: calc(100% - 20px);
      margin: 0 10px;

      td {
        .myDpMonthValue {
          display: inline-block;
          height: 28px;
          width: 80px;
          background: #f0f2f5;
          vertical-align: middle;
          text-align: center;
          line-height: 28px;
          font-weight: normal;
          font-size: 13px;
          color: rgba(22, 42, 76, 0.9);
          border-radius: 4px;

          &.myDpMarkCurrMonth {
            border: 0;
            color: #376bfb;
          }

          &:hover {
            background: #bee39d;
          }
        }

        &.myDpDisabled {
          background: unset;

          .myDpMonthValue {
            background: unset !important;
            color: rgba(22, 42, 76, 0.5) !important;
            cursor: not-allowed;
          }
        }

        &.myDpSelectedMonth {
          background-color: white;

          .myDpMonthValue {
            background: #6ab72a !important;
            color: white !important;
          }
        }

        &.myDpTableSingleMonth:hover {
          background-color: white;
        }
      }
    }

    //================== years table =====================

    .myDpYearTable {
      height: 160px;
      width: calc(100% - 20px);
      margin: 0 10px;

      td {
        .myDpYearValue {
          display: inline-block;
          height: 28px;
          width: 46px;
          background: #f0f2f5;
          vertical-align: middle;
          text-align: center;
          line-height: 28px;
          font-weight: normal;
          font-size: 13px;
          color: rgba(22, 42, 76, 0.9);
          border-radius: 4px;

          &.myDpMarkCurrYear {
            border: 0;
            color: #376bfb;
          }

          &:hover {
            background: #bee39d;
          }
        }

        &.myDpDisabled {
          background: unset;

          .myDpYearValue {
            background: unset !important;
            color: rgba(22, 42, 76, 0.5) !important;
            cursor: not-allowed;
          }
        }

        &.myDpSelectedYear {
          background-color: white;

          .myDpYearValue {
            background: #6ab72a !important;
            color: white !important;
          }
        }

        &.myDpTableSingleYear:hover {
          background-color: white;
        }
      }
    }
  }

  .myDpSelectorArrow {
    height: 272px !important;
    width: 268px !important;
    margin-top: -12px;

    &::after {
      display: none;
    }

    &::before {
      display: none;
    }
  }
}