/* -------------------------------------------------------------------------- */
/* Login Home Page - General Styles */

/* Use box-sizing: border-box everywhere on this page */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

:root {
    /*
        NOTE: Unfortunately var() is not supported inside CSS @media queries
              so these values are simply here for reference (for now).
              It appears that the only way to achieve this with currently
              supported features would be to make use of a CSS postprocesser.
    */
    /* Breakpoints are defined in terms of min-width */
    --ts-media-breakpoint-mobile-sm: 0px;
    --ts-media-breakpoint-mobile-med: 321px;
    --ts-media-breakpoint-mobile-large: 376px;
    --ts-media-breakpoint-tablet: 426px;
    --ts-media-breakpoint-laptop: 769px;
    --ts-media-breakpoint-laptop-large: 1025px;
    --ts-media-breakpoint-laptop-xl: 1367px;
    --ts-media-breakpoint-laptop-xxl: 1601px;
}

.ts-login-home-page {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 112px repeat(3, 1fr);
}

/* -------------------------------------------------------------------------- */
/* Login Home Page - Responsive Layout */

/* NOTE: This layout follows a "mobile-first" approach.
         The 'default' rules represent a small mobile device,
         while subsequent breakpoints adapt the layout
         for progressively larger screens.
*/

.ts-login-home-page__banner {
    grid-column-start: 1;
    grid-column-end: end;
    grid-row-start: 1;
    grid-row-end: 2;
    
    display: flex;
    position: relative;  /* allow absolute positioning .ts-login-home-page__character-container */
    justify-content: center;
    min-height: 112px;
    padding: 0px 28px;
    overflow-y: clip;  /* don't add a scrollbar when the screen is very short */
    
    background-color: var(--ts-green-1);
}

.ts-login-home-page__banner-content {
    display: flex;
    justify-content: space-between;
    flex: 1;
    min-width: 272px;
    max-width: 320px;
}

.ts-login-home-page__banner-copy {
    width: 168px;
    line-height: 1.2;  /* override .ts-typography-h4 */
    margin: auto 0px;
    
    font-family: 'atc-arquette', 'Helvetica', sans-serif;
    color: var(--ts-black);
}

.ts-login-home-page__character-container {
    grid-column: 9 / end;
    grid-row: 1 / 3;
    align-self: end;
}
.ts-login-home-page__character-container img {
    width: 104px;
    transform: scaleX(-1);  /* mirror */
}

.ts-login-home-page__main-container {
    grid-column-start: 1;
    grid-column-end: end;
    grid-row-start: 2;
    grid-row-end: end;
    
    display: flex;
    justify-content: center;
    padding: 40px 28px;
    background-color: var(--ts-white);
    
    overflow-y: auto;  /* scroll if the screen is very short (likely due to a user resize) */
    overflow-x: hidden;
}

.ts-login-home-page__main-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 272px;
    max-width: 320px;
}

.ts-login-home-page__techsmart-logo img {
    height: 24px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* Sign In with SSO */

.ts-login-sso-button-list {
    display: flex;
    justify-content: space-between;
}

.ts-login-sso-button-list__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 64px;
    
    color: var(--ts-dark-gray-2);
}
.ts-login-sso-button-list__item:hover {
    color: var(--ts-black);
}

.ts-login-sso-button__logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 64px;
    height: 64px;
    border: 1.25px solid var(--ts-gray-disabled);
}
.ts-login-sso-button__logo-link.ts-button {
    border-radius: 50%;  /* override ts-button */
}
.ts-login-sso-button__logo-link:hover {
    background-color: var(--ts-light-gray-1);
    border-color: var(--ts-dark-gray-3);
}

.ts-login-sso-button__logo-link img {
    height: 32px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* TechSmart Login Form */

.ts-login-or-divider {
    position: relative;  /* to position .ts-login-or-divider__text */
    display: flow-root;  /* suppress margin collapsing */
}
.ts-login-or-divider__text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0px 10px;
    color: var(--ts-dark-gray-1);
    background-color: var(--ts-white);
}
.ts-login-or-divider__hr {
    /* override material.css hr selector */
    margin: 12px 0px;
    border-top-color: var(--ts-light-gray-1);
}

.ts-login-username-password-form .ts-text-field {
    width: 100%;
}

.ts-login-home__submit-button {
    flex: 0 0 auto;  /* don't shrink */
}
.ts-login-home__submit-button.ts-button.ts-disabled {
    opacity: 0.4;  /* override ts-button */
}

.ts-login-privacy-policy-link {
    width: fit-content;
    margin: 0px auto;
    text-decoration: none;
    text-align: center;
    color: var(--ts-dark-gray-2);
}
.ts-login-privacy-policy-link:hover {
    text-decoration: underline;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* Responsive Layout Updates */

@media screen and (min-width: 376px) {
    .ts-login-home-page {
        grid-template-rows: 120px repeat(3, 1fr);
    }
    
    .ts-login-home-page__banner-copy {
        width: 214px;
        font-size: 25px;
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 1025px) {
    .ts-login-home-page__banner {
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 1;
        grid-row-end: end;
        
        justify-content: start;
        padding-left: 60px;
    }
    
    .ts-login-home-page__banner-content {
        width: auto;
        max-width: none;
    }
    
    .ts-login-home-page__character-container {
        position: absolute;  /* align along border of .ts-login-home-page__banner */
        right: -144px;  /* using boulder.svg as a reference, align his finger to the border */
    }
    .ts-login-home-page__character-container img {
        width: 500px;
        transform: none;
    }
    
    .ts-login-home-page__banner-copy {
        width: 338px;
        margin: 60px 0px 0px 0px;
        font-size: 40px;
    }
    
    .ts-login-home-page__main-container {
        grid-column-start: 6;
        grid-column-end: end;
        grid-row-start: 1;
        grid-row-end: end;
    }
    
    .ts-login-home-page__main-content {
        margin: auto 0px;
    }
    
    .ts-login-home-page__techsmart-logo img {
        height: 29px;
    }
    
    .ts-login-sso-button-list__item {
        width: 80px;
    }
    .ts-login-sso-button__logo-link {
        height: 80px;
        width: 80px;
    }
    .ts-login-sso-button__logo-link img {
        height: 40px;
    }
}

@media screen and (min-width: 1367px) {
    .ts-login-home-page__banner {
        padding-left: 138px;
    }
    
    .ts-login-home-page__banner-copy {
        width: 370px;
        margin: 124px 0px 0px 0px;
        font-size: 44px;
    }
    
    .ts-login-home-page__character-container {
        right: -160px;  /* using boulder.svg as a reference, align his finger to the border */
    }
    .ts-login-home-page__character-container img {
        width: 550px;
    }
}

@media screen and (min-width: 1728px) {
    .ts-login-home-page__banner {
        padding-right: 184px;
    }
    
    .ts-login-home-page__banner-content {
        justify-content: end;
    }
    
    .ts-login-home-page__banner-copy {
        width: 446px;
        margin: 230px 0px 0px 0px;
        font-size: 52px;
    }
    
    .ts-login-home-page__character-container {
        right: -188px;  /* using boulder.svg as a reference, align his finger to the border */
    }
    .ts-login-home-page__character-container img {
        width: 650px;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/