@import '../_variables.scss';
@import '../_mixins.scss';

@mixin hideOriginalControl() {
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  position: absolute !important;
  top: 0 !important;
}

@include exports('forms.datetimes') {
  input.fui-input-date {
    display: inline-block;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    border: 1px solid $gray-300;
    font-family: inherit;
    padding: $controls-padding 3rem $controls-padding $controls-padding;
    height: $default-control-height;
    font-size: $font-size-base;
    font-weight: $font-weight-bold;
    background: none;
    color: $gray-900;
    @include controls-transitions();
    @include border-radius($border-radius);
    @include no-placeholder();

    &:focus {
      border-color: $gray-500;
    }

    &[disabled] {
      background-color: $gray-200;
      color: $gray-500;
    }

    & ~ .fui-calendar-icon-wrapper {
      color: $gray-500;
      position: absolute;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      top: calc(50% - (#{$controls-icons-max-width} / 2));
      left: calc(100% - (#{$controls-padding} + #{$controls-icons-max-width}));
      width: $controls-icons-max-width;
      height: $controls-icons-max-width;
      margin: 0;
      cursor: pointer;
      line-height: normal;
      z-index: $zindex-controls-icons;
      &.has-fui-helper {
        left: calc(100% - (#{$controls-padding} + #{$controls-icons-max-width} + 1.875rem));
      }
    }
  }

  .fui-form-control-small {
    input.fui-input-date ~ .fui-calendar-icon-wrapper {
      top: calc(50% - (#{$controls-small-icons-width} / 2));
      left: calc(100% - (#{$controls-small-padding} + #{$controls-small-icons-width}));
      width: $controls-small-icons-width;
      height: $controls-small-icons-width;
      &.has-fui-helper {
        left: calc(100% - (#{$controls-padding} + #{$controls-icons-max-width} + 1rem));
      }
    }
  }

  .fui-control-container {
    &:not(.fui-empty):not(.fui-no-label) {
      .fui-datetime-wrapper,
      .fui-time-wrapper,
      .fui-date-wrapper {
        input.fui-input-date {
          padding: $controls-padding 3rem 0 $controls-padding !important;
        }
      }
    }

    > .fui-time-wrapper {
      .fui-select {
        .ng-placeholder {
          display: block !important;
        }
      }
    }

    &:not(.fui-no-label) {
      > .fui-time-wrapper {
        .fui-select:first-of-type {
          .ng-placeholder {
            display: none !important;
          }
        }
      }
    }

    &.fui-touched.fui-error,
    &.fui-dirty.fui-error {
      .fui-time-wrapper {
        .fui-select:last-of-type {
          .ng-arrow-wrapper {
            display: none;
          }
        }
      }
    }

    > .fui-datetime-wrapper {
      .fui-time-wrapper,
      .fui-date-wrapper {
        .fui-subtext-wrapper,
        .fui-control-icons {
          display: none !important;
        }
      }
    }
  }

  .fui-control-container.fui-control-focus {
    > .fui-date-wrapper {
      input.fui-input-date {
        border-right: 1px solid $gray-500 !important;
        border-color: $gray-500;
      }
    }
  }

  .fui-datetime-wrapper {
    .fui-control-container.fui-control-focus {
      > .fui-date-wrapper {
        input.fui-input-date {
          border-bottom-right-radius: 0 !important;
          border-top-right-radius: 0 !important;
        }
      }
    }

    .fui-control-container:not(.fui-control-focus) {
      > .fui-date-wrapper {
        input.fui-input-date {
          border-right: none !important;
          border-bottom-right-radius: 0 !important;
          border-top-right-radius: 0 !important;
        }
      }
    }
  }

  .fui-time-wrapper,
  .fui-date-wrapper {
    position: relative;
    display: block;
  }

  .fui-select-container.fui-form-control.fui-datetime-container {
    .fui-control-container {
      .fui-datetime-wrapper {
        .fui-form-control:not(:last-child) {
          margin: 0 !important;
        }

        .fui-datetime {
          @include hideOriginalControl();
        }

        .fui-select:first-of-type {
          .ng-select-container {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
          }
        }

        .fui-time-wrapper,
        .fui-date-wrapper {
          float: left;
        }

        &.fui-datetime-4 {
          .fui-control-label {
            max-width: calc((100% / 4) - #{$controls-padding});
          }

          .fui-time-3 {
            width: calc(100% - calc(100% / 4)) !important;

            .fui-select {
              width: calc(100% / 3) !important;
            }
          }

          .fui-date-wrapper {
            width: calc(100% / 4) !important;
          }
        }

        &.fui-datetime-3 {
          .fui-control-label {
            max-width: calc((100% / 3) - #{$controls-padding});
          }

          .fui-time-2 {
            width: calc(100% - calc(100% / 3)) !important;

            .fui-select {
              width: calc(100% / 2) !important;
            }
          }

          .fui-date-wrapper {
            width: calc(100% / 3) !important;
          }
        }

        &.fui-datetime-2 {
          .fui-control-label {
            max-width: calc((100% / 2) - #{$controls-padding});
          }

          .fui-time-1 {
            width: calc(100% - calc(100% / 2)) !important;

            .fui-select {
              width: calc(100%) !important;
            }
          }

          .fui-date-wrapper {
            width: calc(100% / 2) !important;
          }
        }
      }
    }
  }

  .fui-select-container.fui-form-control.fui-time-container {
    .fui-control-container {
      .fui-time-wrapper {
        .fui-time {
          @include hideOriginalControl();
        }

        .fui-select {
          display: inline-block !important;
          vertical-align: top;
          margin: 0 !important;

          .ng-select-container {
            border-right: none;
            border-radius: 0;
          }

          &.ng-select-opened,
          &.ng-select-focused {
            &:not(.ng-select-top) {
              > .ng-select-container {
                border-top-color: $gray-500 !important;
                border-left-color: $gray-500 !important;
                border-right-color: $gray-500 !important;
              }
            }

            &.ng-select-top {
              > .ng-select-container {
                border-right-color: $gray-500 !important;
                border-left-color: $gray-500 !important;
                border-bottom-color: $gray-500 !important;
              }
            }

            > .ng-select-container {
              border-right-width: 1px;
              border-right-style: solid;
            }

            + .fui-select {
              > .ng-select-container {
                border-left: none;
                padding-left: 1px;

                .ng-value-container {
                  .ng-placeholder {
                    left: calc(1rem + 1px);
                  }
                }
              }
            }
          }

          &:first-of-type {
            .ng-select-container {
              border-top-left-radius: $border-radius;
              border-bottom-left-radius: $border-radius;
            }

            &.ng-select-focused,
            &.ng-select-opened {
              &:not(.ng-select-top) {
                .ng-select-container {
                  border-bottom-left-radius: 0;
                }
              }

              &.ng-select-top {
                .ng-select-container {
                  border-top-left-radius: 0;
                }
              }
            }
          }

          &:last-of-type {
            .ng-select-container {
              border-right: 1px solid $gray-300;
              border-top-right-radius: $border-radius;
              border-bottom-right-radius: $border-radius;
            }

            &.ng-select-focused,
            &.ng-select-opened {
              &:not(.ng-select-top) {
                .ng-select-container {
                  border-bottom-right-radius: 0;
                }
              }

              &.ng-select-top {
                .ng-select-container {
                  border-top-right-radius: 0;
                }
              }
            }
          }
        }

        &.fui-time-3 {
          .fui-control-label {
            max-width: calc((100% / 3) - (#{$controls-padding} + #{$select-arrow-size}));
          }

          .fui-select {
            width: calc(100% / 3) !important;
          }
        }

        &.fui-time-2 {
          .fui-control-label {
            max-width: calc((100% / 2) - (#{$controls-padding} + #{$select-arrow-size}));
          }

          .fui-select {
            width: calc(100% / 2) !important;
          }
        }

        &.fui-time-1 {
          .fui-control-label {
            max-width: calc(100% - (#{$controls-padding} + #{$select-arrow-size}));
          }

          .fui-select {
            width: 100% !important;
          }
        }
      }
    }
  }

  .fui-select-container.fui-form-control.fui-time-container {
    .fui-control-container {
      .ng-select {
        &.ng-select-filtered,
        .ng-has-value {
          .ng-value-container {
            .ng-input {
              > input {
                @include ng-select-input-with-label();
              }
            }
          }
        }
      }

      &.fui-no-label {
        .ng-select {
          &.ng-select-filtered,
          .ng-has-value {
            .ng-placeholder {
              display: block;
            }

            .ng-value {
              margin: calc(#{$controls-padding} + 3px) 0 0 !important;
            }
          }
        }
      }
    }
  }
}