@use 'mixins/mixins' as *;
@use 'mixins/function' as *;
@use 'mixins/config' as *;

@include b(date-picker) {
  display: flex;
  flex-wrap: nowrap;
  width: fit-content;
  max-width: 100%;
  border-radius: getCssVar('border-radius-base');
  border: 1px solid getCssVar('border-color');
  align-items: center;

  &:hover {
    border-color: getCssVar('border-color-hover');
  }

  &.is-focus {
    border-color: getCssVar('color-primary');
  }

  &.is-disabled {
    background-color: getCssVar('disabled-bg-color');
    &:hover {
      border-color: getCssVar('border-color');
    }
  }

  @include e(middle) {
    color: getCssVar('text-color-placeholder');
  }

  @include e(start) {
    font-size: 14px;
    flex: 1;

    &.is-disabled {
      .#{$el-namespace + -input__wrapper } {
        box-shadow: none;
      }
    }

    @include elb(input__wrapper) {
      border: none;
      box-shadow: none;
    }
  }

  @include elb(input__wrapper) {
    width: 100%;

    &:hover {
      box-shadow: none;
    }
    &.is-focus {
      box-shadow: none;
    }
  }
}

@include b(date-picker) {
  @include e(end) {
    font-size: 14px;
    flex: 1;

    &.is-disabled {
      .#{$el-namespace + -input__wrapper } {
        box-shadow: none;
      }
    }

    @include elb(input__wrapper) {
      border: none;
      box-shadow: none;
    }
  }
}

@include elb(form-item) {
  &.is-error {
    .#{$plus-namespace + -date-picker} {
      border-color: getCssVar('color-danger');

      .#{$el-namespace + -input__wrapper } {
        box-shadow: none;

        &.is-focus {
          box-shadow: none !important;
        }
        &:hover {
          box-shadow: none;
        }
      }
    }
  }
}