@import '../../style/index.scss';

$input: 'cp-ui-input';

.#{$input} {
  display: inline-block;
  position: relative;
  width: 100%;
  &.#{$input}-disabled {
    input {
      border-color: #d9d9d9 !important;
    }
  }
  .#{$input}-container {
    display: flex;
    align-items: center;

    .#{$input}-prefix {
      margin-right: 5px;
      color: rgba(0, 0, 0, 0.65);
    }
    .#{$input}-inline-prefix {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 99;
    }
    .#{$input}-internal {
      display: table;
      flex: 1;

      &.#{$input}-group {
        .#{$input}-addon-before {
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
          border-right: 0;
        }

        .#{$input}-content {
          position: relative;

          &:first-child {
            input {
              border-bottom-right-radius: 0;
              border-top-right-radius: 0;
            }
          }

          &:not(:first-child):not(:last-child) {
            input {
              border-radius: 0;
            }
          }

          &:last-child {
            input {
              border-bottom-left-radius: 0;
              border-top-left-radius: 0;
            }
          }
        }

        .#{$input}-addon-after {
          float: right;
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
          border-left: 0;
        }

        .#{$input}-addon-before {
          text-align: center;
          background-color: #fafafa;
          vertical-align: middle;
          border: 1px solid #d9d9d9;
          border-right: 0;
          border-radius: $border-radius-normal;
          cursor: pointer;
          color: rgba(0, 0, 0, 0.65);

          .before {
            display: block;
            margin-left: 11px;
            margin-right: 11px;
            position: relative;
            line-height: 30px;
          }
        }

        .#{$input}-error {
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
          border-left: 0;
        }
      }

      .#{$input}-addon-after {
        text-align: center;
        background-color: #fafafa;
        vertical-align: middle;
        border: 1px solid #d9d9d9;
        border-left: 0;
        border-radius: $border-radius-normal;
        cursor: pointer;
        color: rgba(0, 0, 0, 0.65);

        .after {
          display: block;
          margin-left: 11px;
          margin-right: 11px;
          position: relative;
          line-height: 30px;
        }
      }

      .#{$input}-content {
        position: relative;
        display: flex;

        input {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          margin: 0;
          list-style: none;
          position: relative;
          padding: 4px 20px 4px 11px;
          width: 100%;
          height: 32px;
          font-size: $font-size-normal;
          line-height: $line-height-normal;
          color: rgba(0, 0, 0, 0.65);
          background-color: #fff;
          background-image: none;
          border: 1px solid #d9d9d9;
          border-radius: $border-radius-normal;
          -webkit-transition: all 0.3s;
          transition: all 0.3s;
          flex: 1;

          &::placeholder {
            color: #999;
          }

          &:focus {
            outline: 0;
            border-color: $color-brand-normal;
            box-shadow: 0 0 0 2px #ffccc7;
          }

          &:hover {
            border-color: $color-brand-normal;
          }

          &::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
          }
        }

        .#{$input}-clear {
          position: absolute;
          right: 5px;
          top: 50%;
          transform: translateY(-50%);
        }
        .#{$input}-inline-suffix {
          position: absolute;
          right: 5px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }

    .#{$input}-suffix {
      margin-left: 5px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
