@import "mixin";
.ws-state-input {
  @include flex;
  flex-direction: column;
  width: 100%;
  &.small{
    .ws-state__block{
      height: 32px;
      input{
        font-size: .875rem;
      }
    }
  }
  &.center{
    .ws-state__block{
      input{
        text-align: center;
      }
    }
  }
  &.is-focus {
    .ws-state__block {
      &:before {
        border-width: 2px;
        border-color: var(--v-primary-lighten2);
      }
    }
  }
  &.is-ok {
    .ws-state__block {
      &:before {
        border-width: 2px;
        border-color: var(--v-good-base);
      }
      .after-icon {
        color: var(--v-good-base);
      }
    }
  }
  &.is-error {
    .ws-state__block {
      &:before {
        border-width: 2px;
        border-color: var(--v-alert-base);
      }
      .after-icon {
        color: var(--v-alert-base);
      }
    }
    .ws-state__detail {
      &:before {
        border-width: 2px;
        border-color: var(--v-alert-base);
      }
      .after-icon {
        color: var(--v-alert-base);
      }
      .v-icon {
        color: var(--v-alert-base);
      }
      p {
        color: var(--v-alert-base);
      }
    }
  }
  &.is-dislabled {
    cursor: default;
    .ws-state__block {
      &:before {
        border-width: 0;
        background-color: var(--v-disabled-base);
      }
    }
  }
  .ws-state__block {
    @include flex;
    @include flex_align;
    width: 100%;
    // padding: 0 12px;
    height: 40px;
    outline: none;
    font-size: 1rem;
    line-height: 1.5;
    cursor: text;
    position: relative;
    &:before {
      @include ts;
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      border-radius: 8px;
      top: 0;
      left: 0;
      border: solid 1px var(--v-inputBorder-base);
      z-index: 0;
    }
    input {
      @include no_select;
      width: 100%;
      outline: none;
      position: absolute;
      z-index: 2;
      border-radius: 8px;
      padding:8px 12px;
      color: var(--v-textPrimary-base);
    }
    .before-icon {
      font-size: 1.25rem;
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      top: 0;
      right: 0;
      z-index: 3;
    }
    .after-icon {
      width: 40px;
      height: 40px;
      font-size: 1.25rem;
      flex: 0 0 auto;
      position: absolute;
      z-index: 3;
      top: 0;
      right: 0;
      &.clickable {
        cursor: pointer;
      }
    }
  }
}