/* To display an icon, add the "icon" class
along with the class corresponding to the desired icon.
Example: <span class="icon download"></span>. 
When icons are included as part of buttons or dropdown menus 
(e.g. by applying classes "btn btn-denali-primary") color 
and hover styles are applying according to the styles defined 
by the button classes. 
Example :<button class="btn btn-denali-primary"><span class="icon download"></span></button>
Usage outside of buttons will generally 
require specification of desired color by applying another 
class e.g. "bg-orange".
Example: <span class="icon download bg-orange"></span>
*/
.icon {
    display: inline-block;
    height: 24px;
    width: 24px;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.icon.hover-tooltip {
    height: 16px;
    width: 16px;
}

.icon.icon-48{
    height: 48px;
    width: 48px;
}

.icon.arrow-left {
    -webkit-mask-image: url(@arrowLeftIcon);
    mask-image: url(@arrowLeftIcon);
}

.icon.arrow-right {
    -webkit-mask-image: url(@arrowRightIcon);
    mask-image: url(@arrowRightIcon);
}

.icon.backpack {
    -webkit-mask-image: url(@backpackIcon);
    mask-image: url(@backpackIcon);
}

.icon.bell {
    -webkit-mask-image: url(@bellIcon);
    mask-image: url(@bellIcon);
}

.icon.bell-strikethrough {
    -webkit-mask-image: url(@bellStrikeThroughIcon);
    mask-image: url(@bellStrikeThroughIcon);
}

.icon.binoculars {
    -webkit-mask-image: url(@binocularsIcon);
    mask-image: url(@binocularsIcon);
}

.icon.bug {
    -webkit-mask-image: url(@bugIcon);
    mask-image: url(@bugIcon);
}

.icon.calendar-icon {
    -webkit-mask-image: url(@calendarIcon);
    mask-image: url(@calendarIcon);
}

.icon.cancel {
    -webkit-mask-image: url(@cancelXIcon);
    mask-image: url(@cancelXIcon);
}

.icon.compare-arrows {
    -webkit-mask-image: url(@compareArrowsIcon);
    mask-image: url(@compareArrowsIcon);
}

.icon.copy {
    -webkit-mask-image: url(@copyIcon);
    mask-image: url(@copyIcon);
}

.icon.diamond {
    -webkit-mask-image: url(@diamondIcon);
    mask-image: url(@diamondIcon);
}

.icon.delete {
    -webkit-mask-image: url(@deleteIcon);
    mask-image: url(@deleteIcon);
}
.icon.double-check{
    -webkit-mask-image: url(@doubleCheckIcon);
    mask-image: url(@doubleCheckIcon);
}

.icon.download {
    -webkit-mask-image: url(@downloadIcon);
    mask-image: url(@downloadIcon);
}

.icon.expand-less {
    -webkit-mask-image: url(@expandLessIcon);
    mask-image: url(@expandLessIcon);
}

.icon.expand-more {
    -webkit-mask-image: url(@expandMoreIcon);
    mask-image: url(@expandMoreIcon);
}

.icon.flag {
    -webkit-mask-image: url(@flagIcon);
    mask-image: url(@flagIcon);
}

.icon.flask {
    -webkit-mask-image: url(@flaskIcon);
    mask-image: url(@flaskIcon);
}

.icon.fit-screen {
    -webkit-mask-image: url(@fitScreenIcon);
    mask-image: url(@fitScreenIcon);
}

.icon.grid {
    -webkit-mask-image: url(@gridIcon);
    mask-image: url(@gridIcon);
}

.icon.hiking {
    -webkit-mask-image: url(@hikingIcon);
    mask-image: url(@hikingIcon);
    height: 48px;
    width: 48px;
}

.icon.hourglass {
    -webkit-mask-image: url(@hourglassIcon);
    mask-image: url(@hourglassIcon);
}

.icon.linkout {
    -webkit-mask-image: url(@linkoutIcon);
    mask-image: url(@linkoutIcon);
}

.icon.list {
    -webkit-mask-image: url(@listIcon);
    mask-image: url(@listIcon);
}

.icon.mail {
    -webkit-mask-image: url(@mailIcon);
    mask-image: url(@mailIcon);
}

.icon.pencil {
    -webkit-mask-image: url(@editIcon);
    mask-image: url(@editIcon);
}

.icon.plant {
    -webkit-mask-image: url(@plantIcon);
    mask-image: url(@plantIcon);
}

.icon.question-mark {
    -webkit-mask-image: url(@questionMarkIcon);
    mask-image: url(@questionMarkIcon);
}

.icon.search {
    -webkit-mask-image: url(@searchIcon);
    mask-image: url(@searchIcon);
}

.icon.star {
    -webkit-mask-image: url(@starIcon);
    mask-image: url(@starIcon);
}

.icon.star-filled {
    -webkit-mask-image: url(@starFilledIcon);
    mask-image: url(@starFilledIcon);
}

.icon.star-half {
    -webkit-mask-image: url(@starHalfIcon);
    mask-image: url(@starHalfIcon);
}

.icon.plus {
    -webkit-mask-image: url(@plusIcon);
    mask-image: url(@plusIcon);
}

// Not using "table" here since there is already a class with that name for styling table elements
.icon.table-icon {
    -webkit-mask-image: url(@tableIcon);
    mask-image: url(@tableIcon);
}

.icon.three-vertical-dots {
    -webkit-mask-image: url(@threeDotsIcon);
    mask-image: url(@threeDotsIcon);
}

.icon.upload {
    -webkit-mask-image: url(@uploadIcon);
    mask-image: url(@uploadIcon);
}

.icon.warning {
    -webkit-mask-image: url(@warningIcon);
    mask-image: url(@warningIcon);
}