@import "../customVars";

.v-date-picker-wrapper {
  position: relative;

  &.open {
    .v-btn-wrapper {
      .ant-btn {
        background-color: @black;
        border-color: @black;
        color: @white;
      }
    }
  }
}

.v-date-picker.ant-calendar-picker {
  position: absolute;
  left: 0;
  top: 37px;

  .ant-calendar-picker-input.ant-input {
    border: none;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;

    .ant-calendar-range-picker-input, .ant-calendar-picker-icon, .ant-calendar-picker-clear, .ant-calendar-range-picker-separator {
      display: none;
    }
  }
}

.ant-calendar-picker-container.v-calendar-picker-container {
  .ant-calendar {
    padding: 0 32px;
    box-shadow: @common-shadow;

    &.ant-calendar-range {
      width: 784px;
      height: 480px;
    }

    .ant-calendar-panel {
      .ant-calendar-range-middle {
        display: none;
      }
    }
    .ant-calendar-range-part {
      width: 336px;

      &.ant-calendar-range-left {
        .ant-calendar-body {
          padding: 0;
        }
      }
      &.ant-calendar-range-right {
        .ant-calendar-body {
          padding: 0;
        }
      }

      .ant-calendar-body {
        border-top: none;
        .ant-calendar-table {
          .ant-calendar-column-header {
            text-transform: uppercase;
            color: #8d8d8d;
          }
          .ant-calendar-cell {
            padding: 0;
            height: 48px;
            line-height: 48px;

            &.ant-calendar-selected-day {
              .ant-calendar-date {
                background-color: @black;
              }
            }

            &.ant-calendar-today {
              &.ant-calendar-in-range-cell {
                .ant-calendar-date {
                  background-color: transparent;
                }
              }
              .ant-calendar-date {
                font-weight: normal;
                background-color: @blue;
              }
            }
            &.ant-calendar-selected-date {

            }
            .ant-calendar-date {
              border: 0;
              margin: 0;
              width: 48px;
              height: 48px;
              line-height: 48px;
            }
            &.ant-calendar-in-range-cell {
              &:before {
                top: 0;
                bottom: 0;
                background-color: @black;
              }
              .ant-calendar-date {
                color: @white;
              }
            }
          }
        }
      }
    }

    .ant-calendar-input-wrap {
      display: none;
    }
    .ant-calendar-prev-year-btn, .ant-calendar-next-year-btn {
      display: none;
    }
    .ant-calendar-prev-month-btn, .ant-calendar-next-month-btn {
      color: @black;
      font-size: 32px;
      line-height: 24px;
    }
    .ant-calendar-prev-month-btn {
      &::after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><path id="a" d="M14.414 16l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 1.414L14.414 16z"/></defs><g fill="none" fill-rule="evenodd" transform="translate(-8 -8)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#333" fill-rule="nonzero" xlink:href="#a"/><g fill="#0A0606" mask="url(#b)"><path d="M0 0h32v32H0z"/></g></g></svg>');
      }
    }
    .ant-calendar-next-month-btn {
      &::after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><path id="a" d="M19.707 15.293a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L17.586 16l-6.293-6.293a1 1 0 1 1 1.414-1.414l7 7z"/></defs><g fill="none" fill-rule="evenodd" transform="translate(-8 -8)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#333" fill-rule="nonzero" xlink:href="#a"/><g fill="#0A0606" mask="url(#b)"><path d="M0 0h32v32H0z"/></g></g></svg>');
      }
    }
    .ant-calendar-month-select, .ant-calendar-year-select {
      line-height: 24px;
    }

    .ant-calendar-header {
      padding-top: 16px;
      padding-bottom: 16px;
      line-height: 24px;
      box-sizing: content-box;
      height: 24px;

      .ant-calendar-prev-month-btn {
        left: 12px;
      }
      .ant-calendar-next-month-btn {
        right: 12px;
      }
    }

    .ant-calendar-footer {
      margin-top: 16px;
      border-top: 1px solid #e0e0e0;
      padding: 0;

      .ant-calendar-footer-extra {
        float: none
      }

      .v-range-picker-extra-footer {
        display: flex;
        justify-content: space-between;
        padding: 15px 0 16px;

        .v-btn-wrapper {
          & + .v-btn-wrapper {
            margin-left: 16px;
          }
        }
        .v-range-picker-reset {
          display: inline-block;
          line-height: 48px;
          color: @blue;
          cursor: pointer;

          &.hidden {
            visibility: hidden;
          }
        }
      }
    }
  }
}