@prefixCls: ~'source-upload-modal';

:global {
  .@{prefixCls} {
    .easyv-form-item {
      &-label {
        width: 71px;
        & > label {
          color: #fff;
        }
      }

      &-control-input {
        input,
        .easyv-radio-wrapper,
        .easyv-select-selector {
          background-color: #181a24;
          border-color: rgba(255, 255, 255, 0.12);
          color: #b4b7c1;

          &::placeholder {
            color: rgba(180, 183, 193, 0.5);
          }
        }

        .easyv-radio-wrapper {
          background-color: var(--easyv-background-6);
        }

        .easyv-select-selector:hover {
          border-color: var(--easyv-primary-color);
        }

        input:hover,
        input:focus {
          border-color: var(--easyv-primary-color);
        }

        .easyv-radio-wrapper {
          .easyv-radio-inner {
            background-color: #181a24;
            border-color: #b4b7c1;
          }

          .easyv-radio-checked {
            .easyv-radio-inner {
              border-color: #4fb0ff;
            }
          }
        }
      }

      &-has-error {
        input,
        input:hover,
        input:focus,
        .easyv-select-selector {
          background-color: #181a24 !important;
          border-color: #ff4d4f;
        }
      }
    }

    .easyv-upload.easyv-upload-drag {
      border-color: rgba(255, 255, 255, 0.12);
      background-color: #181a24;
      height: 100%;
      &:hover {
        border-color: var(--easyv-primary-color);
      }
    }

    .easyv-upload {
      color: rgba(180, 183, 193, 0.5);
    }

    &-upload {
      position: relative;

      width: 100%;
      height: 190px;

      .easyv-spin-nested-loading,
      .easyv-spin-container {
        height: 100%;
      }

      &-preview {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background-color: #181a24;
        position: absolute;
        left: 0;
        top: 0;

        img,
        video {
          max-width: 100%;
          max-height: 100%;
        }

        &-operate {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.6);
          z-index: -1;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        &:hover &-operate {
          z-index: 1;
        }
      }
    }

    &-dragger {
      padding: 8px 0;

      &-icon {
        display: inline-block;
        width: 64px;
        height: 64px;
        margin-bottom: 4px;
        background-image: url(../../../../../images/icon_upload.svg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    &-select-dropdown {
      background-color: #181a24;

      .easyv-select-item {
        color: rgba(255, 255, 255, 0.6);

        &-option-active {
          background-color: #79809d;
          color: #fff;
        }
        &-option-selected {
          background-color: #3a89fe;
          color: #fff;
        }
      }
    }

    &-select-dropdown {
      .easyv-select-arrow {
        color: rgba(255, 255, 255, 0.6);
      }
    }
    &-radio {
      :global {
        .easyv-radio-wrapper {
          color: var(--easyv-text-4);
        }
        .easyv-radio-wrapper-checked {
          color: #fff;
        }
        .easyv-radio-input:focus + .easyv-radio-inner {
          box-shadow: none;
        }
        .easyv-radio-inner {
          width: 14px;
          height: 14px;
          background: none;
        }
      }
    }
  }
}
