/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS THEME CUSTOM STYLES
----------------------------------------
!! Copy this file to your project's
   sass root. Don't edit the version
   in node_modules.
----------------------------------------
Custom project SASS goes here.

i.e.
@include u-padding-right('05');
----------------------------------------
*/

// sass --watch styles.scss:styles.css

/*
----------------------------------------
Normalize
----------------------------------------
*/

    * {
        box-sizing: border-box; 
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-transition: 150ms ease;
        -moz-transition:  150ms ease;
        -o-transition: 150ms ease;
        -ms-transition: 150ms ease;
        transition: 150ms ease;
    }
    *:focus:not(.focus-visible) {
        outline-offset: 0rem; 
        outline:color('gray-cool-30') solid 4px;
    } 


    // /* Remove outline for non-keyboard :focus */
    // input:not([disabled]):focus, 
    // select:not([disabled]):focus, 
    // textarea:not([disabled]):focus, 
    // button:not([disabled]):focus,
    // input:not([disabled]):focus-visible, 
    // select:not([disabled]):focus-visible, 
    // textarea:not([disabled]):focus-visible, 
    // button:not([disabled]):focus-visible,
    // button:focus:not(:focus-visible)
    // // .usa-button:focus, 
    // {
    //     outline:0;
    //     outline-offset: 0rem; 
    // }
        
 
    input:not([disabled]):focus, 
    select:not([disabled]):focus, 
    textarea:not([disabled]):focus, 
    button:not([disabled]):focus,
    .usa-button:focus, .usa-button.usa-focus {
        outline-offset: 0rem; 
        outline:color('gray-cool-30') solid 4px;
    }

    /* Optional: Customize .focus-visible */
    // button:focus-visible, 
    // .focus-visible { 
    //     outline:0;
    //     outline-offset: 0rem; 
    // }


    iframe,
    [href],
    [tabindex],
    [contentEditable=true] {
        &:focus {
            // outline:none;
        }
    }
   
 

/* color: primary */
    $ucla-black: #231F20;
    $ucla-yellow: #F6F8AD;
    $ucla-lavender: #C7B5ED;

/* color: secondary */
    $ucla-yellow-light: #FDFAD9;
    $ucla-grey: #EFEEF1;
    $ucla-grey-light: #EFF1EF;
    $ucla-orange-light:#F6EEEC;

/* grid */    
    $theme-site-margins-width: 2;


/*
----------------------------------------
Typography
----------------------------------------
*/
    body {
        color:$ucla-black;
        line-height: line-height('body', 4);
        @include at-media('mobile') { 
            font-size: size('body', 'sm');   
        }
        @include at-media('desktop') { 
            font-size: size('body', 'md');
        } 
    }
    .usa-prose > p { 
        line-height: line-height('body', 3);
    }

/* headings */
    h1, h2, h3, h4, h5, h6,
    .usa-prose > h1,  
    .usa-prose > h2, 
    .usa-prose > h3, 
    .usa-prose > h4,
    .usa-prose > h5, 
    .usa-prose > h6 {
        font-weight: fw('normal');
        margin-top: units(1);
        margin-bottom:units(1);
    }

    h1,
    .usa-prose > h1 {
       
        @include at-media('mobile') { 
            font-size: size('body', 'xl'); 
            line-height: line-height('body', 3);  
        }
        @include at-media('desktop') { 
            font-size: size('body', '2xl');
            line-height: line-height('body', 2);
            margin-bottom:units(3);
        }  
    }
    h2, 
    .usa-prose > h2 {
        line-height: line-height('body', 3);
        @include at-media('mobile') { 
            font-size: size('body', 'lg');   
            
        }
        @include at-media('desktop') { 
            font-size: size('body', 'xl');
        }  
    }
    h3, 
    .usa-prose > h3 {
        text-transform: uppercase;
        line-height: line-height('body', 3);
        @include at-media('mobile') { 
            font-size: size('body', 'sm');   
        }
        @include at-media('desktop') { 
            font-size: size('body', 'md');
        }  
    }

    h4, 
    .usa-prose > h4 {
        line-height: line-height('body', 4);
        @include at-media('mobile') { 
            font-size: size('body', '2xs');   
        }
        @include at-media('desktop') { 
            font-size: size('body', 'sm');
        }  
    }

    h5, 
    .usa-prose > h5 {
        line-height: line-height('body', 2);
        @include at-media('mobile') { 
            font-size: size('body', '3xs');   
        }
        @include at-media('desktop') { 
            font-size: size('body', 'xs');
        }  
    }

    h6, 
    .usa-prose > h6 {/*mobile h5*/
        line-height: line-height('body', 4);
        font-size: size('body', '3xs');    
    }
          
    h6.usa-heading-alt {  
        font-size: size('body', '3xs');
        line-height: line-height('body', 4);
        text-transform: none;
        margin-top:units(4);
        margin-bottom:units(1);

    }

    .headline {
        padding-left: units(2);
    }



/* utility styles for drawcontour.js */
    svg.draw-contour {
        position:absolute;
        pointer-events: none;
    }
    svg.draw-contour path {
        fill: none;
        stroke: #000;
    }
    
    @keyframes dash {
        to {
        stroke-dashoffset: 0;
        }
    }
    .contour-animate svg path {
        stroke-dasharray: 32 4;
        stroke-dashoffset: 36;
        animation: dash 1s linear infinite;
    }


/* container */
/**grid**/
    .grid-container {
        padding-left: 0rem;
        padding-right: 0rem;
        @include at-media('mobile') { 
            padding-left: units(2);
            padding-right: units(2);
        }
        @include at-media('desktop') { 
            padding-left: units(0);
            padding-right: units(0);
        }  
    }

    @media (min-width: 64em) {
        .grid-row.grid-gap {
            padding-left:0;
            padding-right:0;
            margin-left: 0rem;
            margin-right: 0rem;
        }
        .grid-row.grid-gap > * {
            padding-left:0;
            padding-right:1rem;
            // margin-left:0;
            // margin-right:0;
            // margin-left: units(2);
            // margin-right: units(2);
        }
        .grid-row.grid-gap > *:first-child {
           padding-left:0;
        }
        .grid-row.grid-gap > *:last-child {
            padding-right:0;
        }
        .grid-row.grid-gap > .grid-col-12 {
            padding-left: 0;
            padding-right: 0;
        }
        .grid-row.grid-gap > .desktop\:grid-col-12{
            padding-left: 0;
            padding-right: 0;
        }
    }
    
    .ucla-bg-dark {
        @include u-width('full');
        background-color: $ucla-black;
        color: color('white');
        margin:0;
        padding-bottom:units(2);
        // @include u-padding-y(2);
        @include u-margin-y(2);
    }

/*
----------------------------------------
Navigation 
----------------------------------------
*/
.usa-nav {
    @include at-media-max($theme-navigation-width) {
        // @include u-pin('right');
        // @include u-pin('y');
        @include u-pin('x');
        // top: units($sliding-panel-width);
        top:units(15);
        position: fixed;
        background: color('white');
        border-right: 0;
        display: none;
        flex-direction: column;
        overflow-y: auto;
        // padding: units(2);
        padding:0;
        margin:0;
        // width: units($sliding-panel-width);
        width:100%;
        z-index: z-index(500);
    
        &.is-visible {
        //   animation: slidein-left 0.3s ease-in-out;
            animation: slidein-top 0.3s ease-in-out;
            display: flex;
        }
      }
}

    .usa-header--basic {
        @include at-media($theme-navigation-width) {
            .usa-nav {
                padding: 0;
                margin:0;
            }
        }
    }
    .usa-navbar {
        @include border-box-sizing;
        height: units($size-touch-target);
       
        @include at-media-max($theme-navigation-width) {
            @include u-flex('align-center');
            border-bottom: none;
            display: flex;
            padding:units(4) units(0);
            justify-content: space-between;
            flex-direction: row-reverse;
            align-items: flex-start;
            
        }
        @include at-media ('mobile'){
            // padding:units(2) units(0);
            padding:0;
        }
        @include at-media($theme-navigation-width) {
            border-bottom: none;
            display: inline-block;
            height: auto;
        }
    }



    .usa-nav-container {
        @include at-media($theme-navigation-width) {
            @include clearfix;
            @include u-padding-x(0);
            padding-left:0;
            padding-right:0;
        }
    }
    
   
    .usa-header--basic {
        @include at-media($theme-navigation-width) {
            .usa-nav-container {
            @include u-flex('align-start', 'justify');
            display: flex;
            padding-top:units(2);
            }
        }
    }

    .usa-header--basic .usa-navbar {}
    .usa-logo{
        line-height:0;
        margin-top:0;
        @include at-media('mobile') {
            width:10rem;
            
        }
        @include at-media('tablet'){
            width:16rem;
          
        }
        @include at-media-max($theme-navigation-width) {
            flex:none;
            line-height:0;
            margin-left:0;
            // margin-top: units(6);
            }
        @include at-media($theme-navigation-width) {
            position: relative;
            // width: 21rem;
            width: 16rem;
            padding: 0;
            margin:0;
            // margin-top: units(2);
        }
    }

    .usa-nav__primary-item {
        @include at-media-max($theme-navigation-width) {
            border-top: units(1px) solid $ucla-black;
            margin-top: 0;
        }
    }


    .usa-nav__primary button {
        border-radius: 0;
        text-transform: uppercase;
        color: $ucla-black;
        margin-left:units(1);
        margin-right:0;
        padding: units(1);
        margin-top: 0;
        border:none;
        font-weight:normal;
        @include at-media-max($theme-navigation-width) {
            // margin-top: units(0);
            font-size: size('body', 'md');
        }

        @include at-media($theme-navigation-width) {
            border-radius: 0;
            text-transform: uppercase;
            color: $ucla-black;
            margin-left:0;
            margin-right:units(2px);
            padding: units(1);
            border:none;
            font-weight:normal;
            font-size: size('body', 'xs'); /*supposed to be sm but scaled down due to the adjusted weight */
        }
        &:hover {
            border:none;
            color:inherit;
            background-color:inherit;
            text-decoration: none;
            @include at-media($theme-navigation-width) {
              background-color: transparent;
              border:none;
            }
          }
          &:active {
            border:none;
            text-decoration: none;
            background-color:$ucla-black;
            color: color('white');
          }
    
        &:focus{
            border:none;
            text-decoration: inherit;
            background-color:$ucla-black;
            color: color('white');
            outline:0;
            outline-offset: 0;
            
        }
        &:focus-visible {
            text-decoration: inherit;
            background-color:$ucla-black;
            color: color('white');
            border:none;
            outline-offset: 0;
            outline:color('gray-cool-30') solid 4px;

            
        }
    }

    
    .usa-header--basic .usa-current::after, 
    .usa-header--basic [aria-expanded=true]::after, 
    .usa-header--basic 
    .usa-nav__link:hover::after {
    height: 0rem;
    left: 0rem;
    right: 0rem;
    bottom: 0rem;
    background-color:white;
    @include at-media('mobile') {
        height: 0rem;
        left: 0rem;
        right: 0rem;
        bottom: 0rem;
        background-color:white;

    }
    

    }

    .usa-menu-btn {
        background-color: color('white');
        @include u-padding-x(0);
    }

    .usa-menu-btn:hover {
        background-color: color('white');
    }



/* side nav */
    nav {
        @include at-media('mobile') { 
            @include u-margin-x(2);
            margin-top:units(8);
        }
        @include at-media('tablet') { 
            @include u-margin-x(2);
            margin-left:0;
            margin-top:units(15);
        }
        @include at-media('desktop') { 
            @include u-margin-x(3);
            margin-top:units(8);
        }  
    }
    .usa-prose {
        @include at-media('tablet') {
           margin-top:units(8);
        }
        @include at-media('desktop') {
            margin-top:0
        }
     }
    .usa-sidenav {
        border-bottom:none;
        font-size: size('body', 'sm');
        font-weight: fw('bold');
        text-transform:uppercase;
        line-height: line-height('heading', 2);
        // .grid-congainer & {
        // @include u-margin-x(-$theme-site-margins-mobile-width);
        // @include at-media('tablet') {
        //     // @include u-margin-x(0);
        //     // margin-left: -1rem;
        //     // margin-right: -1rem;
        //   }
        // }

        & a{ 
            color: inherit;
            padding: units(.5) units($sidenav-level-1-inset);    
        }

        & a:hover {
            background-color:inherit;
            color:inherit;
            padding: units(.5) units($sidenav-level-1-inset);    
        }

        & .usa-current {
            color: inherit;
            display:inline-block;
            padding: units(.5) units($sidenav-level-1-inset);    
        }

        & .usa-current::after {
            @include at-media($theme-navigation-width) { //remove black bar on default
                display: none;
            }
        }
        & ul {
                padding-inline-start: 0;
        }
        & > li {
            margin-bottom:units(.5);
        }
        & li {
            list-style: none;
        }
   
    }

    .usa-sidenav__sublist {
        font-size: size('body', 'sm');
    }

    .usa-sidenav__item {
        border-top:0;
        & a::before {
            content:"•";
            opacity: 0;
            padding-right: units(1);
        }
        & a:hover::before {
            content:"•";
            opacity: 1;
        }
    
    }
    

    .usa-sidenav__item-others > ul > li  { 
        margin-left:-1px;
        & > a {/*parent items*/
            color: inherit;
            padding: units(.5) 0;
        }  
        & > a::before {
            // content:'—'; 
            // opacity: 0;
        }
        & > a:hover {/*parent items*/ 
            padding-left:0;
        } 
        & > a:hover::before {
            content:'—'; 
            opacity: 1;
            padding-right: units(.5);
        }
        & > ul > li > a{
            color: inherit;
        }    
    }


/* side nav > sub group */
    .usa-sidenav-group {
    border:solid 2px $ucla-black;
    padding: units(.5) 0;   
    }

    .usa-sidenav__sublist {
    text-transform:capitalize;
    font-weight: fw('normal');
    }
    
    .usa-sidenav__item-sublist-open {
    background-color:$ucla-black;
    color:color('white');
    }

    .usa-sidenav__item-others {
    background-color:color('white');
    }

    .usa-header {
        + .usa-section,
        + main {
            @include at-media($theme-navigation-width) {
            border-top: none;
            }
        }
    }


/* mobile menu - hamburger toggle */
    #menuToggle {
        display:none;
        position: relative;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
        @include at-media-max($theme-navigation-width) {
            display: block;
        }
    }
    #menuToggle.usa-menu-btn {
        height: auto;
    }
    #menuToggle input {
        display: block;
        width: 20px;
        height: 32px;
        position: absolute;
        top: 0px;
        left: 0px;
        cursor: pointer;
        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */
        -webkit-touch-callout: none;
    }
    

    #menuToggle span {
        display: block;
        width: 20px;
        height: 2px;
        margin-bottom: 4px;
        position: relative;
        background: $ucla-black;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
            background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
            opacity 0.55s ease;
    }
    
    #menuToggle span:first-child {
    transform-origin: 0% 0%;
    }
    
    #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
    }
    

    #menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-6px, -10px);
    }
    
    #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
    }
    
    
    #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(-1px, 6px);
    }
    

    #menuToggle input:checked ~ ul {
    transform: none;
    }
 

/*
----------------------------------------
UI Components:
----------------------------------------
*/

/* list */


    ul.usa-list {
        list-style-type: none;
        // line-height: line-height('body', 4);
    }

    ul.usa-list > li {
        @include u-text-indent(-4);
    }
    
    ul.usa-list > li::before{
        content:'—';
        padding-right: units(1);
        @include u-text-indent(-4);
    }

    .usa-prose > ul li:last-child, 
    .usa-prose > ol li:last-child, 
    .usa-list li:last-child {
        margin-bottom: units(1);
    }

    ul.usa-list > li > ul  {
        list-style-type: none;
        margin-top: units(0.5);
        margin-bottom: units(1);
    }

    ul.usa-list > li > ul > li::before {
        content:'–';
        padding-right: units(1);
        @include u-text-indent(-4);    
    }

    ol.usa-list { /*footnote*/
        list-style-type: decimal;
        line-height: line-height('body', 4);
        @include at-media('mobile') { 
            font-size: size('body', '3xs');   
        }
        @include at-media('desktop') { 
            font-size: size('body', 'xs');
            line-height: line-height('body', 2);
        } 
    }

    ol.usa-list > li {
        margin-bottom: units(0);
        // font-size: size('body', 'xs');
    }

/*blockquote*/

    .usa-blockquote {
        padding-left: units(4);
        @include u-border-left(1px);
        font-size: size('body', 'md');
        @include at-media('mobile') { 
            font-size: size('body', 'sm');   
        }
        @include at-media('desktop') { 
            font-size: size('body', 'md');
        } 

    }

/* callout */
    .usa-hero__callout {
        background-color: transparent;
        border: solid 1px;
        @include u-border(1px);
        @include u-border('dashed');
        padding: units(2) units(4);
        @include grid-col(10);
        max-width: 30rem;
        @include at-media('mobile') { 
            @include grid-offset(1);        
        }
        @include at-media('desktop') { 
            @include grid-offset(2);
        } 
    }
    .usa-hero__heading {
        @include at-media('mobile') { 
            font-size: size('body', 'sm');        
        }
        @include at-media('desktop') { 
            font-size: size('body', 'md');
        } 
    }
    .usa-hero__heading {
        color: $ucla-black;
        font-weight: fw('normal');
    }
    .usa-hero__heading--alt {
        color: $ucla-black;
        text-transform: uppercase;
    }

    .usa-hero__heading + * {
        margin-top: units(1);
        margin-bottom: units(1);
    }
    .usa-hero__callout > p {
        margin-top: units(1);
        margin-bottom: units(1);
    }
    .usa-hero__callout > p:last-child {
        margin-bottom: 0;
    }

/* button */

    .usa-button {
        @include border-box-sizing;
        line-height: line-height('body', 1);
        border-radius: 0;
        @include u-text('uppercase');
        color: color('white');
        font-size: size('body', 'sm');
        font-weight:fw('normal');
        margin-right: units(1);
        padding: units(1) units(1.5);
        @include u-margin-y(2);
        border: 2px solid $ucla-black;
        width: auto;

        &:hover, 
        &.usa-button--hover {
            border: 2px solid $ucla-black;
            color: $ucla-black;
            background-color: color('white');
         }
        &:focus, 
        &.usa-focus {
             background-color:transparent;
             color: $ucla-black;
             // border: solid 4px;
             // border-color: color('gray-cool-30');
             border: 2px solid $ucla-black;
             // border-color: color('gray-cool-30');
             
             // outline: color('gray-cool-30') solid 4px;
     
         }

        &:disabled {
            border-color: color('gray-cool-30');
            background-color: color('gray-cool-30');
        }
       
        &:hover .usa-social-link .icon-svg {
            @include at-media('mobile') { 
                fill:$ucla-black;
            }
            @include at-media('desktop') { 
                fill:white;
            } 
        }
        &:hover .usa-social-link .icon-svg-line rect,
        &:hover .usa-social-link .icon-svg-line path {
            @include at-media('mobile') { 
                stroke:$ucla-black;
            }
            @include at-media('desktop') { 
                stroke:white; 
            } 
        }
       & .usa-social-link.mobile {
            @include at-media('mobile') { 
                display:inline-block;
            }
            @include at-media('desktop') { 
                display:none; 
            }  
        }
    }
    
  
    .usa-button--secondary {
        background-color: color('white');
        border: 2px solid $ucla-black;
        color: $ucla-black;
        font-weight: fw('normal');
        text-transform: capitalize;

        @include at-media('mobile') { 
            font-size: size('body', 'md');   
        }
        @include at-media('desktop') { 
            font-size: size('body', 'xl');
        }  

        &:hover,
        &.usa-button--hover {
            background-color:$ucla-black;
            border-color: $ucla-black;
            color: color('white');
        }

        &:active, 
        &.usa-button--active {
            background-color:transparent;
            color: $ucla-black;
            border: 2px solid $ucla-black;    
        }
        &:disabled {
            color: color('gray-cool-30');
            border: 2px solid;
            background-color:color('white');
        }

    }

    .usa-button--unstyled {
        color: $ucla-black; 
    }
    .usa-button--hover {
        color: $ucla-black;
        border: 2px solid $ucla-black;
    }


  

/*tabular data*/
    .usa-prose > table caption, 
    .usa-table caption {
        font-weight: fw('normal');
        @include u-font('body', 'sm');
        line-height: line-height('body', 5);
    }

    .usa-table {
        border-bottom: solid 1px black;
    }

    .usa-prose > table th, 
    .usa-table th, 
    .usa-prose > table td, 
    .usa-table td {
        @include u-font('body', 'sm');
        line-height: line-height('body', 5);
        border-style:none;
        background-color: transparent;
        padding: 0 units(2);       
    }

    .usa-prose > table th:first-child {
        padding-left:0;
    }

    .usa-prose > table tr:last-child > td,
    .usa-prose > table tr:last-child > th {
        padding-bottom:  units(2);
    } 

/* accordion */
    .usa-accordion__heading,
    .usa-prose .usa-accordion__heading,
    .usa-accordion__content  {
        margin-right:units(4);
    }

    .usa-accordion__content {
        background-color: transparent;
        // @include u-font('body', 'sm');
    }

    .usa-accordion__button {
        font-weight: fw('normal');
        line-height: line-height('body', 3);
        background-color: transparent;
        @include u-border-bottom(1px);
        background-image:nont;
        padding: units(1) 0;
        
        &:hover {
            background-color:transparent;
        }
        &.lg { 
            font-size: size('body', 'xl');
            &::before {
                margin-top:units(1);
            }
        }
        &.sm { 
            font-size: size('body', 'md');
            &::before {
                margin-top:3px;
            }
        }
        & span {
            padding-left: units(4);
            display:block;
        }
    
  
        &::before{
            background-image: url(../../img/arrow-down.svg);
            position: absolute;
            background-size: 100%;
            background-position: left;
            padding-right:units(2);
            margin-right:units(1);
        
            width:units(2);
            height:units(2);
            content:'';
            background-repeat: no-repeat;
            appearance: none;
            background-color: transparent;
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }
    
        &[aria-expanded=true]::before{
            background-color:transparent;
            -webkit-transform: rotate(0);
            -moz-transform: rotate(0);
            -ms-transform: rotate(0);
            -o-transform: rotate(0);
            transform: rotate(0);
        }
    }



/*further reading*/
    .usa-accordion.more {
        & .usa-accordion__button { 
            font-weight: normal;
            background-color:color('black');        
            border-bottom-width:0;
            border-bottom-style: solid; 
            font-size: size('body', 'sm');
            width:auto;
            padding: units(0.5) 0;
            transform: translateY(100%);
            &::before {
                background-image: url(../../img/arrow-down-w.svg);
                margin-top: 4px;
                padding-left:0;
                background-size: 80% 80%;
            }
            &:hover {
                color:color('white');
            }
            &::before {
                right:units(-0.5);
                position: absolute;
                background-position: right top;
                float: right;
            }
            & span {
                padding-left:units(1);
                margin-right:units(4);
            }
        }
        
        & .usa-accordion__heading {
            border-bottom: dotted 1px $ucla-black;
            transform: translateY(-50%);
        }
        & .usa-accordion__content {
            padding:0;
        }
    }
  



/*pagination*/
    .pagination {
        padding-bottom:units(1);
        @include u-width('full');
        border-bottom: 1px $ucla-black;
        @include u-border-bottom('dotted');
        @include at-media('mobile') { 
            font-size: size('body', '3xs');   
        }
        @include at-media('desktop') { 
            font-size: size('body', 'xs');
        } 
    }

/*tags*/
    .usa-tag {
        display: inline-block;
        @include border-box-sizing;
        line-height:lh('heading', 1);
        border-radius: 0;
        @include u-text('uppercase');
        background-color: color('white');
        color: $ucla-black;
        font-size: size('body', 'sm');
        margin-right: units(1);
        padding: units(1) units(1.5);
        @include u-margin-y(2);
        border: 2px solid $ucla-black;
    }

    .usa-tag--active {
        background-color:$ucla-black; 
        color: color('white');
    }

/*forms*/
    .usa-input, 
    .usa-textarea, 
    .usa-select, 
    .usa-range {
        border-width: 2px;
        border-color: $ucla-black;
        font-size: size('body', 'xs');
    } 

    .usa-select {
        -webkit-appearance: none;
        -webkit-border-radius: 0px;
        // background-image: url(../img/arrow-both.svg), linear-gradient(transparent, transparent);
        // background-repeat: no-repeat;
    }

    .usa-textarea {
        text-transform: none;
    }

    .usa-input.usa-input--success, 
    .usa-textarea.usa-input--success, 
    .usa-select.usa-input--success, 
    .usa-range.usa-input--success {
        border-color: color('cyan-30v');
    }

    .usa-select.dropdown {
        background-image: url(../../img/arrow-down.svg);        
        appearance: none;
        background-color: color('white');
        background-position: right units(1.5) center;
        background-size: units(2);
        padding-right: units(4);
      
        &::-ms-expand {
          display: none;
        }
      
        // Show default webkit style on select element when autofilled to show icon
        &:-webkit-autofill {
          appearance: menulist;
        }
      
        // Remove dotted outline from select element on focus in Firefox
        &:-moz-focusring {
          color: transparent;
          text-shadow: 0 0 0 color('black');
        }
      }

    // .dropdown {
    //     &::before {
    //         background-image: url(../../img/arrow-down.svg);
    //         margin-top: units(2px);
    //         padding-left:0;
    //     }

    //     &::before {
    //         right:units(-0.5);
    //         position: absolute;
    //         background-position: right top;
    //         float: right;

    //     }
    // }
    

/*error*/
    .usa-label--error {
        font-weight:fw('normal');
    }

/*
----------------------------------------
Image modules
----------------------------------------
*/

/*hero*/
    .usa-container {
        text-align:left;
        padding-bottom:units(4);
        padding-right: units(4);
        @media (max-width: 64em) {
            padding-right: units(0);
        }
    }
    .usa-container-hero {
        text-align:right;
        margin-right:0;
        padding-right:0;

        & span{
            display: inline-block;
            margin-top:units(1);
            @include at-media('mobile') { 
                font-size: size('body', '3xs');   
            }
            @include at-media('desktop') { 
                font-size: size('body', 'xs');
            } 
        }
    }

    .usa-embed-container {
        background-color: color('gray-cool-30');

        & .placeholder {
            text-align:left;
            color: color('gray-cool-50');
            display:block;
            position: relative;
            left:units(2);
            top:units(1);
            @include at-media('mobile') { 
                font-size: size('body', '3xs');   
            }
            @include at-media('desktop') { 
                font-size: size('body', 'xs');
            } 
        }

        &.ratio-16-9 { /*default*/
            padding-bottom: 56.25%;
        }

        &.ratio-4-3 {
            padding-bottom: 75%;
            & > figure {
                bottom: auto;
                top:0;
            }
        }
    
        &.ratio-1-1 {
            padding-bottom: 100%;
            & > figure {
                bottom: auto;
                top:0;
            }
        }

        &.ratio-8-10 {
            padding-bottom: 125%;
        }
    }

    figure {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        background-color: color('white');
        color: $ucla-black;
        bottom: 0;
        right:0;
        margin:0;
        margin-right:0;
        @include at-media('mobile') { 
            font-size: size('body', '3xs');  
            width: units(3);
            height: units(3);
        }
        @include at-media('desktop') { 
            font-size: size('body', 'xs');
            width: units(4);
            height: units(4); 
        } 
    }



/*
----------------------------------------
Footer
----------------------------------------
*/

    .usa-footer__nav {
        max-width: 100%;
        min-width:100%;
        width:100%;
    }

    .usa-footer--big {
        .usa-footer__nav {
            @include at-media('mobile-lg') {
                border-bottom: none;
            }
        }
    }

    .usa-footer__logo {
        @include at-media('mobile') {
            @include u-order('last'); 
        }
        @include at-media('tablet') {
            @include u-order('first');
        }
    }

    .usa-footer__contact-links {
        @include at-media('mobile') {
            @include u-order('last'); 
        }
    }

    .usa-footer__primary-content {
        border-top: none;
    }
    footer { /*grid*/
         
        & .grid-row.grid-gap-4 > * {
        padding-left:0;
        padding-right:0;
            @include at-media('tablet-lg') {
                padding-left:units(2);
            }
        }
        & .grid-row.grid-gap-4 > *:first-child {
            // padding-left:0rem;
        }
        & .grid-row.grid-gap-4 > *:last-child {
            padding-right:0;
            @include at-media('tablet-lg') {
                padding-right:1rem;
            }
    
        }
        & .grid-row.grid-gap-4 > * {

        }
    }

 
    .grid-col-1-5 {
        flex: 0 0 auto;
        width: 13.8%;
        @include at-media('mobile') {
            width:33.333333%;
        }
        @include at-media('tablet') {
            width: 13.8%;
        }
    }

    .usa-footer, 
    .usa-footer__logo-heading  {
        font-size:size('body', 'xs');
    }


    .usa-footer__address {
        font-weight:fw('normal');
        text-transform: capitalize;
        padding-top:units(1);
        padding-bottom:units(2);
    }


    .usa-footer__primary-section {
        background-color:transparent;
    }

    .usa-footer__secondary-section{
        background-color:transparent;

    }

//big footer styles
    .usa-footer--big {
        .usa-footer__primary-link {
            font-size:size('body', 'xs');
            text-transform: uppercase;
        
            @include at-media('mobile-lg') {
                @include u-padding-y(0);
                background: none;
                margin-bottom: units(1);
                padding-left: 0;
        
                &:hover {
                cursor: auto;
                text-decoration: none;
                }
            }
        }    
        .usa-footer__primary-content--collapsible {
            .usa-list--unstyled {
                @include at-media('mobile-lg') {
                padding-top: 0;
                }
            } 
        }
    }

    .usa-footer__secondary-link {
        // line-height: line-height($theme-footer-font-family, 2);
        margin-left: units(0);
        font-weight:fw('normal');
        text-transform: capitalize;
        text-indent: 0;
        line-height: line-height($theme-footer-font-family, 2);
        // padding: 0;
        &:before {
            content: "";
            padding-right: 0;
            text-indent: 0;
        }
        a {
        @include typeset-link;
        text-decoration: none;
        }
        & + .usa-footer__secondary-link {
        padding-top: units(0.5);
        }
        @include at-media('mobile-lg') {
        margin-left: 0;
        }
    }

    ul.usa-list > li.usa-footer__secondary-link {
        text-indent: 0;
        line-height: line-height('body', 2); 
    }

    ul.usa-list > li.usa-footer__secondary-link::before {
        content: "";
        padding-right: 0;
        text-indent: 0;
    }




    .usa-social-link {
        $background-height: auto; 
        @include u-square(4); 
        background-color: transparent;
        display: inline-block;
        position:relative;

        span {
        @include sr-only();
        }
        & svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        & .icon-svg{
            fill:$ucla-black;
        }
        & .icon-svg-line{
            fill:none;
        }
        & .icon-svg-line rect {
            stroke: $ucla-black;
        }
    }
    .usa-button .usa-social-link {
        margin-right:units(1);
        @include at-media('mobile') { 
            @include u-square(1);
        }
        @include at-media('desktop') { 
            @include u-square(1);
        }
    }


    footer .usa-button {
        text-align: left;
        margin-top:0;
        background-color:transparent;  
        color:$ucla-black;
        @include at-media('mobile') { 
            @include u-width('full');
            border:none;
            font-size: size('body', '3xs');
            margin-bottom: 0rem; 
            margin-right:0;
        }
        @include at-media('desktop') { 
            border: solid 2px $ucla-black;
            font-size: size('body', 'xs'); 
            margin-bottom: units(1);
            margin-right:units(1);
        }
        // width:100%;
        &:hover {
            @include at-media('mobile') { 
                border:none;
                background-color: transparent;
                color:$ucla-black;
            }
            @include at-media('desktop') { 
                background-color:$ucla-black;
                color:color('white');
                border: solid 2px $ucla-black;
            }
        }
  
    }