body.unauthenticated {
  --primary: #{$primary};
  --dark: #{darken($primary, 10)};
  --light: #{lighten($primary, 20)};

  background: linear-gradient(
    165deg,
    var(--light) 0%,
    var(--primary) 50%,
    var(--dark) 100%
  );
  background-repeat: no-repeat;
  color: var(--text-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  min-height: 100vh;

  a {
    color: var(--text-link);
    transition: color 0.2s ease-in-out;

    &:hover {
      color: var(--text-link-hover);
      text-decoration: none;
    }
  }

  .actions {
    display: flex;
    font-size: 80%;
    font-weight: 300;
    justify-content: space-between;
    margin-top: 0.5rem;
  }

  .alert {
    margin: 1rem 0;
  }

  .btn {
    text-shadow: 0 0 0;

    &.btn-block {
      display: block;
      width: 100%;
    }

    &.btn-outline-primary {
      background-color: transparent;
      border: 1px solid var(--text-link);
      color: var(--text-link);

      &:hover,
      &:focus,
      &:active,
      &:not(:disabled):not(.disabled):active {
        background: var(--text-link);
        border-color: var(--text-link);
        color: $white;
      }
    }

    &.btn-primary {
      background: var(--primary);
      border: none;
      color: $white;

      &:hover,
      &:focus,
      &:focus-visible,
      &:active,
      &:not(:disabled):not(.disabled):active {
        background: var(--dark);
      }
    }
  }

  .error-text {
    color: var(--text-error);
    font-size: 80%;
  }

  footer {
    margin-top: 3rem;

    p {
      font-size: 80%;
      margin: 0;
      text-align: center;
    }
  }

  .form-container {
    position: relative;

    &-inner {
      margin: 1rem 2rem;

      h1 {
        font-size: 1.75rem;
        font-weight: 300;
        margin: 1rem 0;
        text-align: center;
        text-transform: capitalize;
      }
    }

    .logo {
      height: auto;
      margin: 0 auto;
      width: 10rem;
    }

    .logo-icons {
      background-image: image-url('logo_pattern.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: 0%;
      height: 200%;
      left: 50%;
      max-height: 100vh;
      max-width: 100vw;
      min-height: 975px;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: background-size 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      width: 175%;
      z-index: -1;

      &.expand {
        background-size: 100%;
      }

      &.shrink {
        background-size: 0%;
      }
    }
  }

  input[type='password'],
  input[type='text'] {
    &:focus {
      border-color: var(--primary);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--primary);
      outline: 0;
    }
  }

  .hint {
    font-size: 80%;
    font-weight: 300;
    margin: 0;
  }

  .mission-container {
    padding-left: 8rem;

    .mission-text-cursor {
      animation: blink 0.8s infinite forwards;
      display: inline-flex;
      opacity: 0;
      overflow: hidden;
      width: 2rem;

      @keyframes blink {
        0% {
          opacity: 0;
        }
        49% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
        100% {
          opacity: 1;
        }
      }
    }

    span {
      color: $white;
      font-size: 3rem;
      line-height: 4rem;
    }
  }
}

@mixin unauthenticated-dark {
  body.unauthenticated {
    .form-container {
      background-color: var(--primary-bg-subtle);
    }

    .form-control {
      background-color: transparent;

      &:focus {
        background-color: transparent;
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    @include unauthenticated-dark;
  }
}

[data-theme='dark'] {
  @include unauthenticated-dark;
}
