@import './../theme/vars.scss';

$--withinput-shadow: rgba(black, 0.15);

@mixin with-input($wrapPrefixCls, $wInputPrefix) {
  .#{$wrapPrefixCls} {
    display: flex;
    width: 100%;

    &-inner {
      display: inline-table;
      width: 200px;
      height: 24px;
      font-size: 0;
      line-height: 1;
      vertical-align: middle;
      background: white;
      border: 1px solid #dedede;
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 0;
      transition: all 0.1s linear;

      &:hover {
        border-color: var(--primary-color);
        box-shadow: $focus-shadow;
      }
    }

    &-disabled {
      .#{$inputColorPrefixCls}-inner {
        &:hover {
          background: #f3f3f3;
          border-color: #dedede;
          box-shadow: none;
        }
      }
    }

    &-addon,
    &-addon-after {
      display: table-cell;
      width: 1px;
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
      vertical-align: middle;
      background-color: transparent;
    }

    &-addon-after {
      cursor: pointer;
    }

    &-trigger {
      position: relative;

      &-inner {
        position: relative;
        width: 16px;
        height: 16px;
        margin: auto 0 auto 4px;
        cursor: pointer;
        box-sizing: border-box;
      }

      &.withinput-trigger-open &-value {
        color: var(--primary-color);
      }
    }

    &-colorvalue {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .amos-input.#{$wInputPrefix} {
      width: 100%;
      height: 2.5em;
      padding: 0 4px;
      margin: 0;
      font-size: 12px;
      font-weight: normal;
      line-height: 2.5em;
      color: #333;
      vertical-align: middle;
      background-color: transparent;
      border: none;
      outline: none;

      &:focus {
        border: none;
        outline: none;
        box-shadow: none;
      }
    }

    &-popover {
      &::after {
        display: none;
      }

      .#{$wrapPrefixCls}-type {
        .aficon-tip {
          position: absolute;
          top: inherit;
          line-height: inherit;
          color: #333;
        }
      }

      &-content {
        width: 200px;
        padding: 10px 16px;
        background: white;
        border-radius: 4px;
        box-shadow: 0 0 0 1px $--withinput-shadow, 0 8px 20px $--withinput-shadow;

        .amos-btn {
          padding: 0 0.5em;
        }

        .amos-std-form {
          height: 3em;

          &-label {
            width: 5em;
          }
        }

        .amos-color-picker-swatch {
          padding: 5px 18px 5px 5px;
          border: solid 1px #d8d8d8;
          border-radius: 2px;
          box-shadow: none;

          .amos-color-picker-color {
            width: 69px;
          }

          &::after {
            top: 3px;
            right: 4px;
            font-size: 16px;
            color: #777;
          }
        }
      }

      &.amos-popover-down {
        padding-top: 10px;
      }

      &.amos-popover-up {
        padding-bottom: 9px;
        margin-top: -9px;
      }
    }
  }
}