body.uip-login {
  background-color: var(--uip-login-background);
  display: flex;
  align-items: center;

  &::after {
    width: 50%;
    top: 0;
    height: 100%;
    background: var(--uip-background-default);
    content: "";
    position: absolute;
  }
  &::before {
    width: 50%;
    right: 0;
    height: 100%;
    content: "";
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .uip-login-wrap {
    position: relative;
    left: 25%;
    transform: translateX(-50%);
    z-index: 3;
    #language-switcher {
      .button {
        background-color: var(--uip-button-default-bg);
        border-width: var(--uip-button-border-width);
        border-color: var(--uip-button-border-color);
        color: var(--uip-button-text-color);
        &:hover {
          background: var(--uip-button-default-hover-bg);
          color: var(--uip-button-text-color);
        }
        &:focus,
        &:active {
          box-shadow: none;
          outline: 4px solid var(--uip-color-primary-wash);
        }
      }
      select {
        border: var(--uip-border-width) solid var(--uip-border-color);
        background-color: var(--uip-background-default);
        color: var(--uip-text-color-normal);
        &:active,
        &:focus {
          box-shadow: none;
          border-color: var(--uip-color-primary);
        }
      }
    }
    #login {
      margin: 0;
      padding: 0;
      font-family: var(--uip-body-font-family);
      box-sizing: border-box;
      h1 a {
        margin-left: 0;
        background-size: contain;
        height: 50px;
        width: auto;
        background-position: left;
      }
      .message,
      #login_error {
        border: none;
        background-color: var(--uip-background-muted);
        border-radius: var(--uip-border-radius);
        color: var(--uip-text-color-normal);
        font-weight: var(--uip-text-bold);
        box-shadow: none;
      }
      #login_error {
        background-color: var(--uip-color-red-wash);
      }
      form {
        padding: 0;
        border: none;
        box-shadow: none;
        background: none;
      }
      #loginform {
        padding: 0;
        border: none;
        box-shadow: none;
      }
      input[type="color"],
      input[type="date"],
      input[type="datetime-local"],
      input[type="datetime"],
      input[type="email"],
      input[type="month"],
      input[type="number"],
      input[type="password"],
      input[type="search"],
      input[type="tel"],
      input[type="text"],
      input[type="time"],
      input[type="url"],
      input[type="week"],
      select,
      textarea {
        border: var(--uip-border-width) solid var(--uip-border-color);
        background-color: var(--uip-background-default);
        color: var(--uip-text-color-normal);
        &:active,
        &:focus {
          box-shadow: none;
          border-color: var(--uip-color-primary);
        }
      }
      label {
        margin-bottom: var(--uip-margin-s);
        color: var(--uip-text-color-normal);
      }
      #backtoblog,
      #nav {
        padding-left: 0;
      }
      input[type="checkbox"] {
        border-radius: var(--uip-border-radius);
        box-shadow: none;
        background-color: var(--uip-background-default);
        &:checked {
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 4a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4H8zm7.79 6.27a.75.75 0 1 0-1.08-1.04l-3.793 3.939-1.627-1.69a.75.75 0 1 0-1.08 1.041l2.166 2.25a.75.75 0 0 0 1.08 0l4.334-4.5z' fill='%230c5cef'/%3E%3C/svg%3E");
          background-position: center;
          border-color: var(--uip-border-color);
        }
        &:checked::before {
          content: "";
          display: none;
        }
        &:focus,
        &:active {
          outline: 4px solid var(--uip-color-primary-wash);
        }
      }
      input[type="radio"] {
        box-shadow: none;
        &:checked {
          border-color: var(--uip-background-primary);
        }
        &:checked::before {
          background-color: var(--uip-background-primary);
        }
        &:focus,
        &:active {
          outline: 4px solid var(--uip-color-primary-wash);
        }
      }
      .button-primary {
        background-color: var(--uip-button-primary-bg);
        border-color: var(--uip-button-primary-border-color);
        border-width: var(--uip-button-border-width);
        border-radius: var(--uip-button-border-radius);
        color: var(--uip-button-primary-text-color);
        padding: var(--uip-padding-xxs);
        width: 100%;
        &:hover {
          background-color: var(--uip-button-primary-hover-bg);
          border-color: var(--uip-button-primary-border-color);
          color: var(--uip-button-primary-text-color);
        }

        &:active {
          background-color: var(--uip-button-primary-hover-bg);
          color: var(--uip-button-primary-text-color);
          border-color: var(--uip-button-primary-border-color);
          border-width: var(--uip-button-border-width);
          border-radius: var(--uip-button-border-radius);
          top: inherit;
        }
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  body.uip-login {
    align-items: flex-start;
    background: var(--uip-background-default);
    &::after {
      width: 100%;
    }
    &::before {
      display: none;
    }
    .uip-login-wrap {
      left: auto;
      transform: none;
      padding: var(--uip-padding-m);
      width: 100%;
      #login {
        width: 100%;
      }
    }
  }
}
