/**
 * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
 @import '@/utils/utils.less';

@keyframes fadeInOut {
  0% { opacity: 0; }
  5% { opacity: 0.2; }
  10% { opacity: 0.4; }
  15% { opacity: 0.6; }
  20% { opacity: 0.8; }
  25% { opacity: 1; }
  30% { opacity: 1; }
  40% { opacity: 1; }
  45% { opacity: 0.8; }
  50% { opacity: 0.6; }
  55% { opacity: 0.4; }
  60% { opacity: 0.2; }
  65% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes floatAnimationLeft {
  // 0%, 100% { transform: translate(0, 0); }
  // 25% { transform: translate(-2%, 2%); }
  // 50% { transform: translate(2%, -3%); }
  // 75% { transform: translate(-1%, 1%); }
}

@keyframes floatAnimationRight {
  // 0%, 100% { transform: translate(0, 0); }
  // 25% { transform: translate(2%, 0%); }
  // 50% { transform: translate(-2%, 3%); }
  // 75% { transform: translate(1%, 0%); }
}

.combinedAnimationLeft(@fadeInOutDuration, @fadeInOutDelay, @floatDuration: 3s, @floatDelay: 0s, @floatIteration: infinite) {
  animation: fadeInOut @fadeInOutDuration @fadeInOutDelay ease-in-out @floatIteration, floatAnimationLeft @floatDuration @floatDelay ease-in-out @floatIteration;
}

.combinedAnimationRight(@fadeInOutDuration, @fadeInOutDelay, @floatDuration: 3s, @floatDelay: 0s, @floatIteration: infinite) {
  animation: fadeInOut @fadeInOutDuration @fadeInOutDelay ease-in-out @floatIteration, floatAnimationRight @floatDuration @floatDelay ease-in-out @floatIteration;
}


.animatedElement {
  .combinedAnimationLeft(8s, 0.5s);
}

.animatedElement15 {
  .combinedAnimationRight(8s, 2s);
}

.container {
  width: 100%;
  height: 100%;

  :global {
    .ant-form-item-explain,
    .ant-form-item-extra {
      line-height: 24px;
    }

    .ant-btn-primary[disabled] {
      background-color: #4080ff;
      opacity: 0.3;
      border-color: #4080ff;
    }

    .ant-form-item {
      margin-bottom: 32px;
      transition: none;
    }

    .ant-form-item-with-help {
      margin-bottom: 8px;
    }

    .ant-form-item-has-error {
      height: 72px;
    }

    .ant-form-item-has-error :not(.ant-input-disabled).ant-input,
    .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper,
    .ant-form-item-has-error :not(.ant-input-disabled).ant-input:hover,
    .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper:hover {
      background: #1c222d;
      color: #fff;
      border-color: #ff4d4f;
    }

    .ant-row .ant-form-item .ant-form-item-has-success {
      .ant-form-item-explain {
        display: none !important;
      }
    }

    .ant-show-help-leave-active {
      min-height: 0;
      display: none !important;
    }

    .ant-input-affix-wrapper {
      height: 48px;
      border-radius: 8px;
      background: #1c222d;
      border-color: transparent;
      color: #fff;

      &:hover {
        border-color: #40a9ff;
      }

      &:focus,
      &-focused {
        border-color: #40a9ff !important;
        box-shadow: 0 0 0 2px #1890ff33 !important;
        background: #1c222d;
      }

      input::placeholder {
        .place-holder();
      }

      button {
        background: rgba(255, 255, 255, 10%);
        color: #fff;
        border: none;
        border-radius: 4px;
      }

      :global {
        input {
          color: #fff;

          &:focus,
          &-focused {
            background: #1c222d;
          }
        }
      }
    }

    .ant-input {
      background: #1c222d;

      input::placeholder {
        .place-holder();
      }
    }

    .ant-checkbox input,
    .ant-checkbox-inner {
      width: 16px;
      height: 16px;
      border-radius: 16px;
    }
  }
}

.login-input {
  border-radius: 8px;
  color: #fff;
  height: 48px;
  border-color: transparent;

  &:hover {
    border-color: #40a9ff;
  }

  &:focus,
  &-focused {
    border-color: #40a9ff !important;
    box-shadow: 0 0 0 2px #1890ff33 !important;
    background: #1c222d;
  }
}

.login-input::placeholder {
  .place-holder();
}

.form-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  height: calc(100% - 50px);
}

.main {
  width: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .doubao {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 36px;

    .rippleWave {
      position: absolute;
      top: 0;
    }

    .text {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      letter-spacing: 0.003em;
      text-align: center;
    }

    .doubaoLogo {
      margin-bottom: 18px;
    }

    .bubble1 {
      opacity: 0;
      animation-fill-mode: forwards;
      position: absolute;
      top: 0px;
      left: 36px;
    }

    .bubble2 {
      opacity: 0;
      animation-fill-mode: forwards;
      position: absolute;
      top: 64px;
      right: 36px;
    }
  }

  :global {
    h1 {
      color: #fff;
      text-align: center;
      margin: 0 0 50px 0px;
    }
  }
}

.startButton {
  border-radius: 8px;
  height: 50px;
  width: 158px;
  text-shadow: none;
  box-shadow: none;
  border: none;
  background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);

  &:hover,
  &:focus,
  &:active {
    background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
    opacity: 0.8;
    text-shadow: none;
    box-shadow: none;
    border: none;
  }

  &::after {
    display: none;
  }
}

.startButton[disabled],
.startButton[disabled]:hover {
  color: #fff;
  background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
  opacity: 0.8;
}

.mediaIcon {
  :global {
    svg {
      transform: scale(0.66) translate(0, 4px);
      transform-origin: center;
    }
  }
}

.settingIcon {
  background: transparent;
  margin-bottom: 0;

  &:hover {
    background: none;
  }

  :global {
    svg {
      transform: scale(1);
    }
  }
}