@import "mixin";
.ws-state {
  @include flex;
  flex-direction: column;
  @include auto_margin_top(20px);
  .ws-state__container {
    &.is-error {
      .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);
        }
      }
    }
  }
  .ws-state-label {
    @include no_select;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.43;
    color: var(--v-textPrimary-base);
  }
  .ws-state-input {
    @include auto_margin_top(4px);
  }
  .ws-state-switch {
    @include auto_margin_top(4px);
  }
  .ws-state-date {
    @include auto_margin_top(4px);
  }
  .ws-state-image {
    @include auto_margin_top(4px);
  }
  .ws-state-images {
    @include auto_margin_top(4px);
  }
  .ws-state-textarea {
    @include auto_margin_top(4px);
  }
  .ws-state-editor {
    @include auto_margin_top(4px);
  }
  .ws-state-autocomplete {
    @include auto_margin_top(4px);
  }
  .ws-state-select {
    @include auto_margin_top(4px);
  }
  .ws-state-relationship-select {
    @include auto_margin_top(4px);
  }

  .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;
      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;
      }
    }
  }
  .ws-state__detail {
    @include flex;
    @include auto_margin_top(4px);
    .v-icon {
      margin-right: 9px;
      flex: 0 0 auto;
      color: var(--v-textSecondary-base);
    }
    p {
      margin: 0;
      width: 100%;
      color: var(--v-textSecondary-base);
      font-size: 0.875rem;
      line-height: 1.43;
    }
  }
}