/*  
    The ".gb-icon-btn .icon-" selectors (parent has gb-icon-btn class and I have .icon-whatever class) 
    are temporary. They are currently necessary due to "bad" fake gb-icon-buttons that do not properly 
    reproduce, but simply mimic vendor specific icon patterns."
*/

/* Make sure changes to list of available icons is kept in sync with supportedIconTypes in gb-icon-button.js */


/*Default Icon Style. These apply to all or most icon instances.*/
.gb-icon-btn {
    border: none;
    background-image: none;
    background-color: transparent;
    font-size: 18px;
    color: #3379B7;
    font-family: 'Glyphicons Halflings'; /* Bootstrap Icons */
    padding-right:6px;
    padding-left:6px;
    padding-top:1px;
    padding-bottom:1px;
}

    .gb-icon-btn .icon-add::before,
    .gb-icon-btn.icon-add::before {
        color: #298f33;
        content: "\002b"; /* bootstrap icon name: glyphicon-plus */
    }

    .gb-icon-btn .icon-add-large::before,
    .gb-icon-btn.icon-add-large::before {
        color: #298f33;
        font-size: 40px;
        content: "\002b"; /* bootstrap icon name: glyphicon-plus */
    }

    .gb-icon-btn .icon-remove::before,
    .gb-icon-btn.icon-remove::before {
        color: #dc291e;
        content: "\e014"; /* bootstrap icon name: glyphicon-remove */
    }

    .gb-icon-btn .icon-view::before,
    .gb-icon-btn.icon-view::before {
        content: "\e105"; /* bootstrap icon name: glyphicon-eye-open */
    }

    .gb-icon-btn .icon-print::before,
    .gb-icon-btn.icon-print::before {
        content: "\e045"; /* bootstrap icon name: glyphicon-print */
    }

    .gb-icon-btn .icon-settings::before,
    .gb-icon-btn.icon-settings::before {
        content: "\e019"; /* bootstrap icon name: glyphicon-cog */
    }

    .gb-icon-btn .icon-search::before,
    .gb-icon-btn.icon-search::before {
        content: "\e003"; /* bootstrap icon name: glyphicon-search */
    }


    /* Icons currently using Font Awesome */

    .gb-icon-btn .icon-edit::before,
    .gb-icon-btn.icon-edit::before {
        font-family: 'Font Awesome 5 Free';
        content: "\f044"; /* font awesome icon name: edit */
        font-weight: 900; /* solid style */
        vertical-align: top; /* Pushes font awesome icon up a bit so that it lines up properly with other elements. */
    }


    .gb-icon-btn .icon-calendar-download::before,
    .gb-icon-btn.icon-calendar-download::before {
        font-family: 'Font Awesome 5 Free';
        content: "\f274"; /* font awesome icon name: calendar-check */
        font-weight: 400; /* regular style */
        vertical-align: top; /* Pushes font awesome icon up a bit so that it lines up properly with other elements. */
    }

    .gb-icon-btn .icon-copy::before,
    .gb-icon-btn.icon-copy::before {
        font-family: 'Font Awesome 5 Free';
        content: "\f24d"; /* font awesome icon name: clone */
        font-weight: 400; /* regular style */
        vertical-align: top; /* Pushes font awesome icon up a bit so that it lines up properly with other elements. */
    }

    .gb-icon-btn .icon-file::before,
    .gb-icon-btn.icon-file::before {
        font-family: 'Font Awesome 5 Free';
        content: "\f15c"; /* font awesome icon name: file-alt */
        font-weight: 900; /* solid style */
        vertical-align: top; /* Pushes font awesome icon up a bit so that it lines up properly with other elements. */
    }

    .gb-icon-btn .icon-paste::before,
    .gb-icon-btn.icon-paste::before {
        font-family: 'Font Awesome 5 Free';
        content: "\f328"; /* font awesome icon name: clipboard */
        font-weight: 400; /* regular style */
        vertical-align: top; /* Pushes font awesome icon up a bit so that it lines up properly with other elements. */
    }

    .gb-icon-btn .icon-video::before,
    .gb-icon-btn.icon-video::before {
        font-family: 'Font Awesome 5 Free';
        content: "\f04b"; /* font awesome icon name: play */
        font-weight: 900; /* solid style */
        vertical-align: top; /* Pushes font awesome icon up a bit so that it lines up properly with other elements. */
    }

    /*Used to make bad/missing icons super obvious instead of invisible.*/
    .gb-icon-btn .icon-not-found::before,
    .gb-icon-btn.icon-not-found::before {
        color: #FF00FF;
        content: "\e209"; /* bootstrap icon name: glyphicon-alert */
        font-size: 55px;
    }

/* TODO: Role this into gb-icon-btn or make a distinct component.
         Thinking a distinct component as it has distinct rules.
*/
.info-icon {
    color: #41a9e5;
    font-size: 1.5em;
}