@import "../../../../styles/index";

.InputDate {
  $this: &;
  color: $color-primary;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;

  &-Inner {
    display: flex;
    flex-flow: column;
    position: relative;
  }

  #{$this}-Text {
    background-color: $color-light-gray;
    border: 1px solid transparent;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    outline: none;
    padding: 9px 12px;
  }

  &-Title {
    color: $color-text;
  }

  &-SubTitle {
    color: $color-text;
  }

  &-IconWrapper {
    display: flex;
    align-items: center;
    margin: 8px 0 4px;
    position: relative;

    &__isFocusable {
      &:hover,
      &:focus {
        .InputDate-Text {
          border: 1px solid $color-primary;
        }
      }

      &:hover {
        #{$this}-PostIcon {
          visibility: visible;
        }
      }
    }
  }

  &-Text {
    cursor: pointer;
    height: 40px;
    width: 100%;

    &__isFilled {
      &:focus {
        border: 1px solid $color-primary;
        padding-right: 30px;
      }
    }

    &:focus {
      border: 1px solid $color-primary;
    }

    &__isPlaceholder {
      color: $color-primary;
    }
  }

  &-PreIcon {
    position: absolute;
    left: 13px;
    top: 50%;
  }

  &-PostIcon {
    background-color: $color-primary;
    cursor: pointer;
    height: 12px;
    position: absolute;
    right: 44px;
    width: 12px;
    visibility: hidden;
    -webkit-mask: url("./Close.svg") no-repeat 50% 50%;
    mask: url("./Close.svg") no-repeat 50% 50%;
  }

  &-DatePickerIcon {
    cursor: pointer;
    position: absolute;
    right: 12px;

    path {
      fill: $color-primary;
    }
  }

  &__isInvalid {
    .InputDate-Text,
    .InputDate-Text:hover {
      border: 1px solid $color-red;
    }

    .InputDate-Text:focus {
      border: 1px solid $color-primary;
    }

    #{$this}-SubTitle,
    #{$this}-Title {
      color: $color-red;
    }
  }

  &__isDisabled {
    #{$this}-Text {
      background-color: $color-light-gray;
      color: $color-silver-gray;
      cursor: default;

      &::placeholder {
        color: $color-grey;
      }
    }

    #{$this}-DatePickerIcon {
      cursor: default;
    }
  }
}
