@import "./panel.scss";
@import "./size.scss";

.icon-left-arrow-d:before {
  content: "\e61c";
  display: inline-block;
  transform: rotate(180deg);
}

.icon-top:before {
  content: "\e606";
  display: inline-block;
  transform: rotate(-90deg);
}

.icon-bottom:before {
  content: "\e606";
  display: inline-block;
  transform: rotate(90deg);
}

.vl-date-picker {
  display: inline-block;
  vertical-align: middle;
  color: #444444;

  &:focus, &:active {
    outline: 1px solid #a777fd;
    outline-radius: 4px
  }

  input {
    border: none;
    width: 100%;
    height: 100%;
    min-width: 0;
    outline: none;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    color: inherit;
    background-color: #ffffff;
    cursor: pointer;
    float: left;
  }
}

.vl-date-picker--value-wrapper {
  display: inline-block;
  width: 100%;
  flex-grow: 1;
  position: relative;

  input {
    pointer-events: none;
  }
}

.vl-date-picker--container {
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  overflow: hidden;
  background-color: #ffffff;
  box-sizing: border-box;
  height: inherit;
}

.vl-date-picker--popper {
  height: 100%;
}

.vl-date-picker--popper-reference {
  height: 100%;
}

.vl-date-picker--popper-arrow {
  position: absolute;
  z-index: 1;
  overflow: hidden;

  &:before {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;

    content: '';
    box-sizing: border-box;
    border: $offset solid transparent;
  }

  &:after {
    position: absolute;
    z-index: 1;
    width: $popper-arrow-size;
    height: $popper-arrow-size;
    transform: rotate(45deg);

    content: '';
    box-sizing: border-box;
    box-shadow: 0 0 12px rgba(0, 0, 0, .12);
  }
}

.vl-date-picker--popper-body {
  position: relative;
  z-index: 0;
  text-align: center;
  display: flex;
}

.vl-date-picker--popper-footer {
  word-break: break-all;
  white-space: break-spaces;
  display: none;
}

.vl-date-picker--popper-dialog {
  user-select: none;
  display: flex;
  flex-direction: column;
  background-color: $popper-bg;
  box-shadow: 0 0 12px rgba(0, 0, 0, .12);
  outline: none;
  z-index: 2029;
  border-radius: $borderRadius;

  &:after {
    content: '';
    display: block;
    clear: both;
  }

  .vl-date-picker--box + .vl-date-picker--box {
    border-left: 1px solid #e7e7e7;
  }

  &[data-popper-placement^='top'] > .vl-date-picker--popper-arrow {
    bottom: -$offset;
    width: $popper-arrow-size;
    height: $offset;

    &:before {
      border-bottom-width: 0;
      border-top-color: $popper-bg;
    }

    &:after {
      bottom: 4px;
    }
  }

  &[data-popper-placement^='bottom'] > .vl-date-picker--popper-arrow {
    top: -$offset;
    width: $popper-arrow-size;
    height: $offset;

    &:before {
      border-top-width: 0;
      border-bottom-color: $popper-bg;
    }

    &:after {
      top: 4px;
    }
  }

  &[data-popper-placement^='left'] > .vl-date-picker--popper-arrow {
    right: -$offset;
    width: $offset;
    height: $popper-arrow-size;

    &:before {
      border-right-width: 0;
      border-left-color: $popper-bg;
    }

    &:after {
      right: 4px;
    }
  }

  &[data-popper-placement^='right'] > .vl-date-picker--popper-arrow {
    left: -$offset;
    width: $offset;
    height: $popper-arrow-size;

    &:before {
      border-left-width: 0;
      border-right-color: $popper-bg;
    }

    &:after {
      left: 4px;
    }
  }
}

.vl-date-picker--box {
  padding: 10px;
  width: 300px;
  box-sizing: border-box;
}

.vl-date-picker--range {
  .vl-date-picker--container {
    input {
      border: none;
    }
  }
}

.vl-date-picker--range-begin,
.vl-date-picker--range-end {
  display: flex;
}

.vl-date-picker--range-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  &:after {
    content: ' ';
    display: block;
    height: 1px;
    width: 8px;
    background-color: #a0a0a0;
  }
}

.vl-date-picker--clear {
  display: flex;
  justify-content: center;
  align-items: center;
  width: $clear-size;
  flex-shrink: 0;

  &-button {
    display: inline-block;
    width: 16px;
    text-align: center;
    user-select: none;
    cursor: pointer;

    &:before {
      font-size: 16px;
      font-weight: bolder;
    }
  }
}

.vl-date-picker--empty {
  .vl-date-picker--clear-button {
    color: #e0e0e0;
    display: none;
  }
}

.vl-date-picker--shortcuts {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.vl-date-picker--shortcuts-button {
  display: block;
  width: 80px;
  border: 1px solid #eaeaea;
  background-color: #ffffff;
  cursor: pointer;
  color: #555555;
  padding: 10px 5px;
  outline: none;
  margin-bottom: -1px;
  border-right: none;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
  font-size: 14px;

  &:hover, &:active {
    color: #137DE2;
  }
}

.vl-date-picker--shortcuts {
  float: left;
  height: 340px;
  border-right: 1px solid #eaeaea;
}

.vl-date-picker--icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: $icon-size;
  flex-shrink: 0;

  &:before {
    content: "\e643";
  }
}

.vl-date-picker--time {
  .vl-date-picker--icon {
    &:before {
      content: "\e6f1";
    }
  }
}

.vl-date-picker--datetime {
  .vl-date-picker--icon {
    &:before {
      content: "\e62b";
    }
  }
}

.vl-date-picker--panel-title {
  position: relative;
}