@import (reference) '../extend.less';
.yo-login {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  >img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
  }
  &::before {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';

    background: fade(@black, 30%) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpiMLJ0+w8EDIwgAgQAAgwAUdAHrAFSJ6cAAAAASUVORK5CYII=);
  }
  &--placeholder {
    position: absolute;
    top: 50%;
    left: 0;

    width: 100%;
    height: 0;
    .container-sm {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      height: 0;
    }
  }
  .ant-form {
    width: 300px;
    padding: @padding-lg;

    border-radius: @border-radius-base + 2px;
    background: linear-gradient(45deg, @component-background, fade(@component-background, 80%));
  }
  .ant-form-item {
    margin-bottom: 0;
  }
  .ant-form-item-label {
    padding: @padding-xs 0 0 !important;

    transition: @animation-duration-base;
    transform: translate(0);
    >label {
      font-weight: normal !important;

      color: fade(@white, 40%);
    }
  }
  &--label {
    .ant-form-item-label {
      transform: translate(11px, 28px);
    }
  }
  .ant-input,
  .ant-input-affix-wrapper {
    color: fade(@white, 85%);
    border-width: 0 0 @border-width-base 0 !important;
    border-color: fade(@white, 10%);
    background-color: transparent;
  }
  .ant-input:hover,
  .ant-input:focus,
  .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover,
  .ant-input-affix-wrapper:focus,
  .ant-input-affix-wrapper-focused {
    border-width: 0 0 @border-width-base 0 !important;
    border-color: @primary-color;
    box-shadow: none !important;
  }
  .ant-input::placeholder {
    font-size: @font-size-base;
  }
}
