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

$item-border-color: #f2ce21;
$item-hover-border-color: rgba($item-border-color, 0.65);

.amos-upload-modal-wrapper {
  display: inline-block;
}

.amos-upload-modal {
  .amos-modal-content {
    padding: 0;
  }
}

.amos-upload-modal-content {
  .upload-form-wrapper {
    display: block;
    padding: 10px;
    text-align: center;

    .amos-upload {
      text-align: center;
    }
  }

  .img-list-wrapper {
    height: 300px;
    padding: 20px;
    overflow: auto;
    border-top: 1px solid #ddd;

    .img-list {
      .img-item {
        position: relative;
        display: inline-block;
        cursor: pointer;

        img {
          padding: 2px;
          margin: 3px;
          vertical-align: middle;
          border: 2px solid transparent;
        }

        .remove-file {
          position: absolute;
          top: -3px;
          right: -3px;
          display: none;
        }

        &:hover {
          img {
            border-color: $item-hover-border-color;
            box-shadow: 3px 3px 5px rgba(255, 246, 206, 0.65);
          }

          .remove-file {
            display: inline-block;
          }
        }

        &.img-item-active {
          img {
            border: 2px solid $item-border-color;
          }
        }
      }
    }
  }
}

// --empty data
$emptyDataPrefixCls: amos-empty-data;

.#{$emptyDataPrefixCls} {
  text-align: center;

  &.normal {
    .#{$emptyDataPrefixCls}-icon {
      width: 64px;
      height: 64px;
    }
  }

  &.large {
    .#{$emptyDataPrefixCls}-icon {
      width: 128px;
      height: 128px;
    }

    .#{$emptyDataPrefixCls}-content {
      margin: 10px 0;
      font-size: 14px;
    }
  }
}

.#{$emptyDataPrefixCls}-icon {
  display: inline-block;
  background-size: 100% 100%;
}

.#{$emptyDataPrefixCls}-content {
  color: $text-color-secondary;
}

// --chart theme
.chart-theme {
  display: inline-block;
  padding: 6px 0;

  &-tip {
    padding-bottom: 6px;
  }

  &-result {
    position: relative;
    display: inline-block;
    width: 190px;
    height: 28px;
    padding: 5px 0;
    overflow: hidden;
    background-color: #f2f2e6;

    .color-result-item {
      display: inline-block;
      width: 18px;
      height: 18px;
      margin: 0 5px;
      border-radius: 100%;
    }

    i {
      display: inline-block;
      vertical-align: bottom;
      cursor: pointer;

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

  &-cancel-select {
    margin-left: 6px;
  }

  &-modal {
    .amos-modal-footer {
      .amos-btn + .amos-btn {
        margin-left: 6px;
      }
    }
  }
}

.theme-modal-container {
  .modal-content-top {
    .theme-color-content {
      display: inline-block;
      width: 260px;
      min-height: 252px;
      padding-top: 12px;
      padding-left: 12px;
      margin-right: 24px;
      vertical-align: top;
      border: 1px solid #efefef;

      .theme-color-tip {
        margin-bottom: 6px;
        font-size: 13px;
        letter-spacing: 1px;
        color: #7f7f7f;
        word-break: break-word;
      }

      .theme-color-list {
        .color-item {
          position: relative;
          display: inline-block;
          width: 60px;
          height: 36px;
          padding: 6px;
          font-size: 14px;
          text-align: center;
          cursor: pointer;
          background: white;

          .color-item-core {
            display: block;
            width: 100%;
            height: 100%;
            color: #b4c6d6;
            border: 1px solid #b4c6d6;
            border-radius: 2px;
          }

          .color-item-del {
            position: absolute;
            top: 0;
            right: 0;
            display: none;
            width: 18px;
            height: 18px;
            font-size: 14px;
            line-height: 18px;
            color: white;
            background: #ff3e69;
            border: 1px solid white;
            border-radius: 100%;
          }

          &:hover {
            background: #d2dee8;

            .color-item-del {
              display: block;
            }
          }

          &.color-item-active {
            background: #d5d5d5;
          }
        }

        .color-add {
          display: inline-block;
          width: 36px;
          height: 36px;
          padding: 6px;
          overflow: hidden;
          text-align: center;
          cursor: pointer;
          background: white;

          &:hover {
            background: #d2dee8;

            .amosicon {
              color: green;
            }
          }
        }
      }
    }

    .theme-color-panel-wrapper {
      position: relative;
      display: inline-block;

      .theme-color-panel-mask {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9;
        background: rgba(231, 231, 231, 0.5);
      }
    }
  }

  .color-reset-default {
    margin-top: 12px;
  }
}

// input file
$inputFilePrefixCls: #{$vender-prefix}-input-file;

.#{$inputFilePrefixCls} {
  display: block;
  width: 100%;
  font-size: $font-size-base;
  outline: 0;

  input[type='file'] {
    cursor: pointer;
  }
}

// base64 image
$base64ImgPrefixCls: #{$vender-prefix}-base64-image;

.#{$base64ImgPrefixCls} {
  display: inline-block;

  .amos-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .input-file-wrapper {
    display: inline-block;

    .amos-btn {
      height: 30px;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
  }
}

// json view
.amos-jsonview {
  min-height: 360px;
  color: black;
  background: #f3f3f3;
}

// auto complete
$autoPrefixCls: amos-auto-complete;

.#{$autoPrefixCls} {
  &-popover {
    .amos-popover-content {
      max-width: none;
      padding: 0;
    }
  }

  &-result {
    max-height: 180px;
    padding: 0;
    margin: 0;
    overflow: auto;
    list-style: none;

    > li {
      height: 30px;
      padding: 0 16px;
      line-height: 30px;
      cursor: pointer;

      &:hover {
        background-color: whitesmoke;
      }
    }
  }

  &-option-active {
    background-color: whitesmoke;
  }
}

// Marquee
$marqueeePrefixCls: amos-marqueee;

.#{$marqueeePrefixCls} {
  height: 25px;
  overflow: hidden;
  line-height: 25px;
  word-break: break-all;
  white-space: nowrap;
  box-sizing: border-box;

  &-text {
    display: inline-block;
    padding-left: 100%; /* 从右至左开始滚动 */
    animation: marqueeAnimate linear infinite;
  }

  &:hover {
    .#{$marqueeePrefixCls}-text {
      animation-play-state: paused;
    }
  }

  &.#{$marqueeePrefixCls}-normal {
    .#{$marqueeePrefixCls}-text {
      animation-duration: 18s;
    }
  }

  &.#{$marqueeePrefixCls}-slow {
    .#{$marqueeePrefixCls}-text {
      animation-duration: 26s;
    }
  }

  &.#{$marqueeePrefixCls}-fast {
    .#{$marqueeePrefixCls}-text {
      animation-duration: 6s;
    }
  }
}

@keyframes marqueeAnimate {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}

// css var tool
.css-var-tool {
  display: inline-block;
  padding: 6px;

  &-form {
    .amos-form-builder-field-label {
      width: 160px;
    }
  }
}

// eagle eye

.eagle-eye {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.29);
  border: 1px solid rgba(0, 0, 0, 0.17);

  &-panner {
    position: absolute;
    z-index: 1;
    cursor: move;
    background-color: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
  }

  &-container {
    width: 100%;
    height: 100%;

    &-scroll {
      width: 100%;
      height: 100%;
      overflow: scroll;
    }
  }

  &-children {
    background: #ccc;
    border: 1px solid black;
    box-sizing: border-box;
  }
}