@import './../theme/vars.scss';
@import './../mixins/reset.scss';
@import './../mixins/connect.scss';
@import './../mixins/normal.scss';

$editablePrefixCls: #{$vender-prefix}-editable;
$claerableIptPrefixCls: #{$vender-prefix}-clearable-input;
$iptPrefixCls: #{$vender-prefix}-input;
$copyToClipboard: #{$vender-prefix}-copy-to-clipboard;
$helpTipCls: #{$vender-prefix}-help-tip;
$bulletClsPrefix: #{$vender-prefix}-bullet;

// editable
$editable-height: 2.5em;
$editable-height-sm: 2em;
$editable-height-lg: 3.5em;

.#{$editablePrefixCls} {
  @include reset-component2;

  display: inline-block;
  // The problem of preventing the editing state of a line of `Editable` from being aligned.
  overflow: hidden;

  .#{$vender-prefix}-input + .#{$vender-prefix}-btn {
    margin-left: 0.5em;
  }

  &-editing-container {
    .#{$vender-prefix}-btn {
      height: 2.5em;
    }
  }

  &-sm {
    .#{$vender-prefix}-input,
    .#{$vender-prefix}-btn {
      height: 1.8em;
    }
  }

  &-lg {
    .#{$vender-prefix}-input,
    .#{$vender-prefix}-btn {
      height: 3.5em;
    }
  }

  &-normal-container {
    height: $editable-height;
    padding-left: 0.5em;
    line-height: $editable-height;
    cursor: pointer;

    .#{$editablePrefixCls}-icon {
      display: none;
      margin-left: 0.5em;
    }

    &.#{$editablePrefixCls}-normal-container-sm {
      height: $editable-height-sm;
      line-height: $editable-height-sm;
    }

    &.#{$editablePrefixCls}-normal-container-lg {
      height: $editable-height-lg;
      line-height: $editable-height-lg;
    }
  }

  &.#{$editablePrefixCls}-editing {
    &:hover {
      box-shadow: 0 0 0 0 transparent;
    }
  }

  &:hover {
    background-color: white;
    border-radius: 2px;
    box-shadow: 0 0 0 1px $ext-grey;

    .#{$editablePrefixCls}-normal-container {
      .#{$editablePrefixCls}-icon {
        display: inline-block;
        width: 2em;
        color: $ext-color;
        text-align: center;
        cursor: pointer;
        background-color: $ext-bg-color;
        border-left: 1px solid $ext-grey;
      }
    }
  }

  &.#{$editablePrefixCls}-disabled {
    color: #a3a6a9;
    cursor: not-allowed;

    &:hover {
      border-radius: 0;
      box-shadow: 0 0 0 0 transparent;
    }

    .#{$editablePrefixCls}-normal-container {
      cursor: not-allowed;
    }
  }
}

// clearable input
.#{$claerableIptPrefixCls} {
  display: inline-block;
  width: 100%;

  &-has-clear {
    position: relative;
  }

  .#{$iptPrefixCls} {
    width: 100%;
    padding-right: 25px;
  }

  &#{&}-always-clear {
    .#{$claerableIptPrefixCls}-clear {
      display: inline-block;
    }
  }

  &-clear {
    position: absolute;
    top: 50%;
    right: 5px;
    display: none;
    margin-top: -11px;
  }

  .#{$iptPrefixCls}-sm + .#{$claerableIptPrefixCls}-clear {
    right: 0;
  }

  &:hover {
    .#{$claerableIptPrefixCls}-clear {
      display: inline-block;
    }
  }
}

// copy-to-clipboard
.#{$copyToClipboard} {
  font-size: 12px;
  cursor: pointer;

  &-select {
    display: none;
    user-select: text;
  }
}

// help tip
.#{$helpTipCls} {
  @include reset-component2;

  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  cursor: pointer;

  &-dot {
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    margin-top: 0.6em;
    margin-left: 0.6em;
    background-color: $danger-color;
    border: 1px solid $danger-color;
    border-radius: 50%;
  }

  &-pulse {
    position: absolute;
    width: 1.6em;
    height: 1.6em;
    border: 1px solid $danger-color;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 1px 1px 30px $danger-color;
    animation: amosHelpTipPulse 1.5s ease-out;
    animation-iteration-count: infinite;
  }

  &-pulse-second {
    width: 1.6em;
    height: 1.6em;
    border: 1px solid $danger-color;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 1px 1px 30px $danger-color;
    animation: amosHelpTipPulseSecond 1.5s ease-out;
    animation-iteration-count: infinite;
  }
}

@keyframes amosHelpTipPulse {
  0% {
    opacity: 0.3;
    transform: scale(0.3);
  }

  25% {
    opacity: 0.3;
    transform: scale(0.3);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.5);
  }

  75% {
    opacity: 0.7;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes amosHelpTipPulseSecond {
  0% {
    opacity: 0.3;
    transform: scale(0.3);
  }

  25% {
    opacity: 0.5;
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
    transform: scale(0.3);
  }

  75% {
    opacity: 0.5;
    transform: scale(0.5);
  }

  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
}

// --user
.user-area {
  @include reset-component2;

  .user-info {
    padding: 2em;
    font-size: 16px;
    text-align: center;
  }

  .user-profile {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 2em;

    &-avatar {
      margin-right: 1em;
    }

    &-detail {
      &-name {
        max-width: 180px;
        margin-top: -6px;
        overflow: hidden;
        font-size: 20px;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &-sub {
        margin-top: 3px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.7);
      }
    }
  }

  .profile-divider {
    margin: 0 2em;
    border-bottom: 1px solid rgba(217, 217, 217, 0.6);
  }

  .user-action {
    width: 270px;
    padding: 8px 0;
    margin: 0;
    overflow: hidden;

    li {
      position: relative;
      height: 2em;
      padding: 1em 2em;
      font-size: 14px;
      line-height: 2em;
      list-style: none;
      cursor: pointer;
      box-sizing: content-box;
      user-select: none;

      &:hover {
        background-color: #eaeaea;
      }
    }
  }

  .user-logout {
    display: block;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    color: #333;
    text-align: center;
    cursor: pointer;
    background-color: #f5f5f6;
    border-top: #eaeaea;
    transition: all 0.15s;

    span {
      -webkit-font-smoothing: antialiased;
      letter-spacing: 0.02em;
      text-decoration: none;
      text-rendering: optimizeLegibility;
    }

    &:hover {
      color: $primary-color-deeper;
    }
  }
}

// ---
// bullet

.#{$bulletClsPrefix} {
  font-size: 12px;
  user-select: none;

  & + & {
    margin-left: 5px;
  }

  &-content:first-child {
    border-left-width: 1px;
    border-radius: 3px;
  }

  &-title,
  &-content {
    padding: 2px 4px;
  }

  &-title {
    color: white;
    border-style: solid;
    border-width: 1px;
    border-right-width: 0;
    border-radius: 3px 0 0 3px;
  }

  &-content {
    color: white;
    border-style: solid;
    border-width: 1px;
    border-left-width: 0;
    border-radius: 0 3px 3px 0;
  }

  &.#{$bulletClsPrefix}-shield {
    .#{$bulletClsPrefix}-title {
      background-color: #555;
      border-color: #555;
    }
  }

  &.#{$bulletClsPrefix}-disabled {
    &.#{$bulletClsPrefix}-shield {
      .#{$bulletClsPrefix}-title {
        background-color: #555;
        border-color: #555;
      }

      .#{$bulletClsPrefix}-content {
        color: white;
        background-color: #adadad;
        border-color: #adadad;
      }
    }

    .#{$bulletClsPrefix}-title {
      background-color: #adadad;
      border-color: #adadad;
    }

    .#{$bulletClsPrefix}-content {
      color: #adadad;
      border-color: #adadad;
    }
  }
}

// --
// Affix
.#{$vender-prefix}-affix {
  position: fixed;
  z-index: $affix-zindex;
}

// --
// loading connect
.loading-wrapper {
  position: relative;
  height: 100%;

  .custom-spinner {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 1;
  }

  .loading-container {
    position: relative;
    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

    &-spinning {
      overflow: hidden;
      pointer-events: none;
      opacity: 0.5;
      user-select: none;
    }
  }
}

// ---
// shuttle

$shuttleClsPrefix: #{$vender-prefix}-shuttle;

.#{$shuttleClsPrefix} {
  @include reset-component2;

  &-content {
    padding: 1em;
  }

  &-action {
    height: 3em;
    padding: 0.5em 0;
    line-height: 2.7em;
    text-align: center;

    &-item {
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
      cursor: pointer;
      background: #d8d8d8;
      border-radius: 50%;
      transition: background ease 0.25s;

      & + & {
        margin-left: 0.5em;
      }

      &:hover,
      &.#{$shuttleClsPrefix}-action-item-active {
        background: var(--primary-color);
      }
    }
  }
}

// dropdown-bukle
$bukle-border-color: #dadada;
$bukle-border: 1px solid $bukle-border-color;
$bukle-border-radius: 4px;

.dropdown-bukle {
  @include reset-component2;

  display: inline-block;
  min-height: 2.5em;
  font-size: 14px;
  border: $bukle-border;
  border-radius: $bukle-border-radius;

  &-result {
    display: inline-block;
    padding: 5px 7px;
    text-align: center;
    vertical-align: middle;
    border-left: $bukle-border;
    border-radius: 0 $bukle-border-radius $bukle-border-radius 0;
  }

  &-content {
    cursor: pointer;
    border-radius: $bukle-border-radius 0 0 $bukle-border-radius;

    &-trigger {
      padding: 5px 7px;
    }

    .amos-dropdown-menu-warpper {
      margin-top: 2px;
    }
  }

  &.dropdown-bukle-right {
    .dropdown-bukle-result {
      border-right: $bukle-border;
      border-left: 0;
      border-radius: $bukle-border-radius 0 0 $bukle-border-radius;
    }

    .dropdown-bukle-content {
      border-radius: 0 $bukle-border-radius $bukle-border-radius 0;
    }

    &.dropdown-bukle-aligned {
      .dropdown-bukle-content {
        position: relative;

        .amos-dropdown-menu-warpper {
          right: 0;
        }
      }
    }
  }
}

// Verifycode
.amos-verifycode {
  @include reset-component2;

  position: relative;
  display: inline-block;
  height: 2.5em;

  &-icon {
    position: absolute;
    width: 30px;
    height: 100%;
    line-height: 2.5em;
    text-align: center;
    vertical-align: middle;
  }

  .amos-input {
    padding-left: 24px;
  }

  &-img {
    display: inline-block;
    height: 100%;
    min-width: 5em;
    vertical-align: middle;
    cursor: pointer;

    img {
      height: 2.5em;
    }
  }

  &-tip {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 2.5em;
    color: #333;
    text-align: center;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEUAAABiXZVhROJTAAAAAXRSTlMAQObYZgAAAAtJREFUCNdjwAccAABeAEGiJT+zAAAAAElFTkSuQmCC') repeat;
    border: 1px solid #eee;
  }
}

// waves
$wavesPrefixCls: #{$vender-prefix}-waves;

.#{$wavesPrefixCls} {
  position: absolute;
  width: 8em;
  height: 8em;
  font-size: 14px;

  &-item {
    position: absolute;
    background: $danger-color;
    border-radius: 50%;
    animation: amosWave 5s infinite;
  }
}

@keyframes amosWave {
  from {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 1;
  }

  to {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}

// unit number
$unitnumberPrefixCls: #{$vender-prefix}-unitnumber;

.#{$unitnumberPrefixCls} {
  position: relative;
  line-height: 1;

  &-units {
    &.amos-select-dropdown {
      position: absolute;
      top: 0;
      right: 0;
      width: 5em;
      height: 2em;
      min-width: 5em;
      line-height: 1.8em;
      background: #fafafa;
      border: 0;
      border-left: 1px solid #d8d8d8;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;

      &.amos-idropdown-toggle-open {
        border-color: #c6c6c6;
      }
    }

    &-pop {
      .amos-select-option {
        height: 2em;
        padding-right: 18px;
        line-height: 1.8em;
      }

      .aficon {
        right: 5px;
        margin-top: -12px;
        font-size: 12px;
      }
    }
  }

  .amos-select-title {
    height: 2em;
    padding-right: 24px;
    line-height: 1.8em;
  }

  .aficon {
    right: 2px;
    margin-top: -10px;
  }

  &:hover {
    .#{$unitnumberPrefixCls}-units {
      border-color: $border-color-active;
    }
  }
}

@include composeInput($unitnumberPrefixCls);

// propnumber
$propnumberPrefixCls: #{$vender-prefix}-propnumber;

.#{$propnumberPrefixCls} {
  width: 78px;
  height: 24px;
  font-size: 0;
  line-height: 1;

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

@include composeInput($propnumberPrefixCls);

// box shadow
$boxshadowPicker: #{$vender-prefix}-boxshadow;
$boxshadowInput: boxshadow-input;

@include with-input($boxshadowPicker, $boxshadowInput);

// text shadow
$textshadowPicker: #{$vender-prefix}-textshadow;
$textshadowInput: textshadow-input;

@include with-input($textshadowPicker, $textshadowInput);

// border
$borderPicker: #{$vender-prefix}-border;
$borderInput: border-input;

@include with-input($borderPicker, $borderInput);

.#{$borderPicker} {
  .amos-select-dropdown {
    width: 8em;
    min-width: 8em;
  }
}

// border radius
$radiusPicker: #{$vender-prefix}-radius;
$radiusInput: radius-input;

@include with-input($radiusPicker, $radiusInput);

// edge distance
$edgeDistancePicker: #{$vender-prefix}-edge-distance;
$edgeDistanceInput: edge-distance-input;

@include with-input($edgeDistancePicker, $edgeDistanceInput);

// angle picker
.#{$vender-prefix}-angle {
  display: flex;
  align-items: center;

  .#{$vender-prefix}-slider {
    display: inline-block;
    width: 100px;
    margin-left: 3px;
  }

  .#{$vender-prefix}-input {
    width: 65px;

    &-number {
      margin-left: 3px;
    }
  }

  &-tip {
    margin-left: 6px;
  }

  &#{&}-has-slider &-tip {
    margin-left: 3px;
  }

  .#{$vender-prefix}-button-group {
    margin-left: 4px;

    &-number {
      margin-left: 3px;
    }
  }

  &-quick-h,
  &-quick-v {
    &.#{$vender-prefix}-btn {
      width: 24px;
      height: 24px;
      padding: 0;
      margin: 0;
    }
  }
}

.angle-picker {
  position: relative;
  display: inline-block;
  flex: none;
  cursor: pointer;
  background-color: white;
  border: 1px solid #d2d5dc;
  border-radius: 50%;
  box-sizing: border-box;

  &-circle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    margin: auto;
  }

  &-handler {
    position: absolute;
    top: 4px;
    right: 0;
    left: 0;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: auto;
    cursor: pointer;
    background-color: var(--primary-color);
    border-radius: 50%;
  }
}

// feedback
.#{$vender-prefix}-feedback {
  &-base {
    position: fixed;
    right: 0;
    bottom: 128px;
    z-index: $zindex-feedback;
    display: flex;
    opacity: 0.6;
    flex-direction: column;
    transition: all 0.25s linear 0s;

    &:hover {
      opacity: 1;
    }
  }

  &-effect {
    position: relative;

    &-wrap {
      position: fixed;
      cursor: pointer;
      transition: all 0.15s linear 0s;
    }
  }
}

// status
$statusPrefixCls: #{$vender-prefix}-status;

@mixin make-status($type, $color) {
  &-#{$type} {
    color: $color;

    .#{$statusPrefixCls}-dot {
      background: $color;
    }
  }
}

.#{$statusPrefixCls} {
  @include make-status(success, $success-color);
  @include make-status(processing, $primary-color-deeper);
  @include make-status(default, #e9eaec);
  @include make-status(error, $error-color);
  @include make-status(warning, $warning-color);

  display: inline-flex;
  align-items: center;
  cursor: pointer;

  &-icon,
  &-dot,
  &-title {
    display: inline-block;
  }

  &-title {
    margin-left: 0.5em;
  }

  &-dot {
    width: 1em;
    height: 1em;
    border: 1px solid #e1e1e1;
    border-radius: 50%;
  }
}

// copy input
.amos-copy-input {
  display: flex;

  input[data-af-anchor='input'] {
    height: 2.5em;
    border-radius: $border-radius-base 0 0 $border-radius-base;
  }

  button {
    height: 2.5em;
    border-radius: 0 $border-radius-base $border-radius-base 0;
  }

  &-button {
    .aficon-copy {
      pointer-events: none;
    }
  }
}

// skeleton
$skeletonPrefixCls: #{$vender-prefix}-skeleton;

.#{$skeletonPrefixCls} {
  &-loading-content {
    p {
      margin: 0;
    }
  }

  &-loading-block {
    height: 14px;
    margin: 4px 0;
    background: linear-gradient(90deg, rgba(207, 216, 220, 0.2), rgba(207, 216, 220, 0.4), rgba(207, 216, 220, 0.2));
    background-size: 600% 600%;
    border-radius: $border-radius-sm;
    animation: skeleton-loading 1.4s ease infinite;
  }
}

@keyframes skeleton-loading {
  0%,
  100% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

// fixed
.#{$vender-prefix}-fixed {
  position: fixed;
}

// flex
.#{$vender-prefix}-flex {
  display: flex;

  &.#{$vender-prefix}-flex-inline {
    display: inline-flex;
  }

  &-gap {
    &-sm {
      gap: 8px;
    }

    &-mid {
      gap: 16px;
    }

    &-lg {
      gap: 24px;
    }
  }

  &-vertical {
    flex-direction: column;
  }
}

// resize line
.#{$vender-prefix}-resizeline {
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  cursor: col-resize;

  &-resizing,
  &:hover {
    width: 3px;
    background: #9d9d9d;
  }
}

// roller
.amos-float-roller {
  position: fixed;
  z-index: 999;
  width: 276px;
  height: 138px;
  overflow: hidden;
  cursor: pointer;

  &-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    cursor: pointer;

    .aficon-cross {
      display: inline-block;
      width: 16px;
      height: 16px;
      line-height: 16px;
      color: red;
    }
  }

  &-content {
    padding: 16px;
    overflow: hidden;
  }
}

.amos-light-spot {
  position: relative;
  cursor: pointer;

  &-cover {
    position: absolute;
    z-index: 1;
    width: 160px;
    height: 160px;
    pointer-events: none;
    background: radial-gradient(circle closest-side, rgba(0, 247, 239, 0.4), transparent);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
}

.amos-flex-wrap {
  display: flex;
  justify-content: center;

  &-inner {
    display: flex;
    flex-flow: row wrap;
    gap: var(--afw-gap, 16px);
  }
}