@use "../base/mixins";
@use "../vars/variables";

.page-login {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  justify-content: space-between;
  color: var(--uc-background);
  background-color: variables.$bg-login;
  background-image: url("/images/background/login-bg.jpg");
  background-repeat: no-repeat;
  background-size: 120% auto;
  background-position: 0 bottom;
  padding: 1.25rem;

  @media only screen and (min-width: 2400px) {
    background-image: url("/images/background/login-bg-2500.jpg");
    background-size: 110% auto;
    background-position: 0 bottom;
  }

  @media only screen and (max-width: 1900px) {
    background-size: 160% auto;
    background-position: 20% bottom;
  }

  @media only screen and (max-width: 1500px) {
    background-image: url("/images/background/login-bg-1920.jpg");
    background-size: 180% auto;
    background-position: 30% bottom;
  }

  @media only screen and (max-width: 1280px) {
    background-size: 130% auto;
    background-position: 30% center;
  }

  @media only screen and (max-width: 1100px) {
    background-image: url("/images/background/login-bg-1280.jpg");
    background-size: 120% auto;
    background-position: 0 bottom;
  }

  @media only screen and (max-width: 900px) {
    background-size: 180% auto;
    background-position: 50% bottom;
  }

  @media only screen and (max-width: 700px) {
    background-image: url("/images/background/login-bg-phone.jpg");
    background-size: 100% auto;
    background-position: center bottom;
  }

  @media only screen and (max-width: 700px) and (max-height: 870px) {
    background: variables.$bg-login;
  }

  @media screen and (max-width: variables.$bp-tablet) {
    padding: 2.62rem 2.62rem 1.25rem;
  }

  header {
    @media screen and (max-width: variables.$bp-tablet) {
      text-align: center;
    }
  }

  &__body {
    padding-left: 7.37rem;

    h1 {
      margin-bottom: 1.25rem;
    }

    h3 {
      margin-top: 3.12rem;
      margin-bottom: 1.88rem;
    }

    .form-item {
      max-width: 22rem;

      input {
        color: var(--uc-theme-color-40);
        background: rgba(0, 0, 0, 0.1);
        border-color: transparent;

        @media screen and (min-width: variables.$bp-tablet-plus) {
          border-color: var(--ucvtheme-color-40);
        }
      }

      label {
        color: var(--uc-theme-color-40);
        text-transform: uppercase;
      }

      &__description {
        color: var(--uc-theme-color-40);
      }
    }

    @media screen and (max-width: variables.$bp-tablet) {
      width: fit-content;
      padding-left: 0;
      margin-top: 3rem;
      margin-bottom: auto;

      h3 {
        margin-top: 1.87rem;
      }
    }

    @media screen and (max-width: variables.$bp-phone) {
      margin: 3rem auto auto;
    }
  }

  &__api-definitions {
    margin-top: 3.125rem;

    @media screen and (max-width: variables.$bp-phone) {
      margin-top: 1.875rem;
    }

    .dropdown-menu {
      display: block;

      &__trigger {
        @include mixins.body-large;
        text-align: left;
        color: var(--uc-background);

        @media (pointer: fine) {
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

  .version-info {
    @media screen and (max-width: variables.$bp-tablet) {
      margin-left: -1.37rem;
    }
  }

  //Remote v2 styling
  &--v2 {
    background-image: url("/images/background/login-bg-v2.jpg");
    background-color: variables.$bg-login-v2;

    @media only screen and (min-width: 2400px) {
      background-image: url("/images/background/login-bg-v2-2500.jpg");
      background-position: 0 center;
    }

    @media only screen and (max-width: 2000px) {
      background-size: 100% auto;
      background-position: 0 20%;
    }

    @media only screen and (max-width: 1800px) {
      background-image: url("/images/background/login-bg-v2-1920.jpg");
      background-size: 120% auto;
      background-position: 5% bottom;
    }

    @media only screen and (max-width: 1500px) {
      background-size: 100% auto;
      background-position: 0 bottom;
    }

    @media only screen and (max-width: 1280px) {
      background-image: url("/images/background/login-bg-v2-1280.jpg");
    }

    @media only screen and (max-width: 900px) {
      background-position: center bottom;
    }

    @media only screen and (max-width: 700px) {
      background-image: url("/images/background/login-bg-v2-phone.jpg");
      background-size: 140% auto;
      background-position: center bottom;
    }

    @media only screen and (max-width: 700px) and (max-height: 750px) {
      background-size: 160% auto;
    }

    @media only screen and (max-width: 700px) and (max-height: 700px) {
      background: variables.$bg-login-v2;
      background-repeat: no-repeat;
    }

    .page-login {
      &__body {
        h1,
        h3 {
          color: var(--uc-foreground);
        }

        .form-item {
          input {
            color: var(--uc-theme-color-60);
            background: var(--uc-theme-color-20);
            border-color: var(--uc-theme-color-30);

            @media (pointer: fine) {
              &:hover {
                border-color: var(--uc-theme-color-40);
              }
            }
          }

          label {
            color: var(--uc-theme-color-60);
          }

          &__description {
            color: var(--uc-theme-color-60);
          }
        }

        .device-meta__host {
          color: var(--uc-theme-color-60);
        }
      }

      &__api-definitions {
        .dropdown-menu__trigger {
          color: var(--uc-foreground);
        }
      }
    }
  }

  &--loading {
    background-image: none;
  }
}