:root {
   --input-linear: linear-gradient(120deg, #362168, #68a68b);
   /* #00C2CB */
   --input-error: red;
   --button-linear: linear-gradient(120deg, #5991b4, #00C2CB, #362168);
   --button-disabled: #acacac;
   --button-success: rgb(18, 151, 107);
   --white: #fff;
   --black: #303030;
   --gray: #929292;
   --light-gray: #cfcfcf;
   --border-height: 1px;
}

.login {
   height: 100vh;
   background: var(--input-linear);
   display: flex;
   justify-content: center;
   align-items: center;
}

.login__container {
   min-height: 400px;
   width: 300px;
   background-color: var(--white);
   box-sizing: border-box;
   padding: 32px;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.login__title {
   margin-bottom: 32px;
   color: var(--black);
}

.login__form {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.login__input {
   height: 48px;
   width: 100%;
   box-sizing: border-box;
   padding-left: 8px;
   border: unset;
   outline: none;
   position: relative;
}

.login__input-border {
   height: var(--border-height);
   width: 100%;
   margin-bottom: 16px;
   background: var(--light-gray);
   transition: .3s ease-in-out;
}

.login__input-border::after {
   content: '';
   display: block;
   height: var(--border-height);
   width: 0;
   margin-bottom: 16px;
   background: var(--input-linear);
   transition: .3s ease-in-out;
}

.login__input:focus+.login__input-border::after {
   width: 100%;
}

.login__input-border.error {
   background: var(--input-error);
}

.login__input-border.error::after {
   background: var(--input-error);
}

.login__submit {
   height: 48px;
   width: 150px;
   padding-left: 8px;
   outline: none;
   position: relative;
   background: var(--button-linear);
   background-size: 200%;
   margin-bottom: 32px;
   color: var(--white);
   font-size: 16px;
   font-weight: bold;
   border: unset;
   border-radius: 4px;
   cursor: pointer;
   transition: 0.5s ease;
}

.login__submit:disabled {
   background: var(--button-disabled);
   cursor: not-allowed;
}

.login__submit:hover {
   background-position: right;
}

.login__submit.success {
   background: var(--button-success);
}

.login__submit.error {
   background: var(--input-error);
}

.login__reset {
   font-size: 12px;
   color: var(--gray);
   text-decoration: none;
}