/* CSS Document */

.icon__menu-hamburger{
    
    content: url(../system/navigation/hamburger-menu.svg);
    width: 24px;
    height: 24px;
    opacity: .54;
    padding:0px;

}

.icon__menu-hamburger--light{
    
    content: url(../system/navigation/hamburger-menu.svg);
    width: 24px;
    height: 24px;
    opacity: 1;
    padding:0px;
    
}



.icon__x{
    
    content: url(../system/navigation/x.svg);
    width: 24px;
    height: 24px;
    
}

.icon__x--light{
    
    content: url(../system/navigation/x.svg);
    width: 24px;
    height: 24px;
    
}





/*Color Variations*/

/*Note that these must be below the icons in order to override them as expected*/

.light--inactive{
    
    opacity: .3;
    
}

.dark--inactive{
    
    opacity: .26;
    
}



/*Icon Sizes*/

.px18{ width:18px; height:18px; }
.px24{ width:24px; height:24px; }
.px36{ width:36px; height:36px; }
.px48{ width:48px; height:48px; }


/*NOTES*/

/*Icon Sizes*/
/*
icons match font sizes... should these be together?
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
*/


/*Color Values*/
/*
.dark{ color: rgba(0, 0, 0, 0.54); }

.dark-inactive{ color: rgba(0, 0, 0, 0.26) }

.light{ color: rgba(255, 255, 255, 1); }

.light-inactive { color: rgba(255, 255, 255, 0.3); }
*/