// The only class we need for icons is .icon
// Standardize the size, padding and alignment for all icons in Moodle.

// Size of default icons.
$icon-width: 16px;
$icon-height: 16px;
// Size of big icons.
$icon-big-width: 64px;
$icon-big-height: 64px;

.icon {
    font-size: $icon-height;
    width: $icon-width;
    height: $icon-height;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    margin-right: 0.5rem;

    &.spacer {
        margin-right: 0;
    }

    &.iconsize-big {
        width: $icon-big-width;
        height: $icon-big-height;
        font-size: $icon-big-height;
    }
}

$icon-color: $body-color !default;

a .icon {
    color: $icon-color;
}

.navbar-dark div .icon {
    color: $navbar-dark-color !important; /* stylelint-disable-line declaration-no-important */
}

.navbar-dark a .icon {
    color: $navbar-dark-color !important; /* stylelint-disable-line declaration-no-important */
}

a:first-of-type > .icon,
span:first-of-type > .icon {
    margin-left: 0.5rem;
}

// Fix the first icon for an action menu. This rule exists to reverse the
// icon margin defined in the a:first-of-type > .icon rule.
.action-menu .dropdown a:first-of-type > .icon {
    margin-left: 0;
}

.pull-xs-right {
    // Now we need to override the .action-menu .dropdown a:first-of-type > .icon
    // rule above for when actions menus are in the pull-xs-right class.
    .dropdown a .icon {
        margin-left: 0;
        margin-right: 0.5rem;
    }

    .icon {
        margin-right: 0;
        margin-left: 0.5rem;
    }
}

// YUI 2 Tree View icons must not have a margin left.
.ygtvcell .icon {
    margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
}

// In the navigation, tree icons should not have margins.
.block_navigation,
.block_settings {
    .tree_item .icon {
        margin-left: 0;
    }
}

[data-action=toggle-drawer] .icon {
    margin: 0;
}

// Apply in special cases where the default icons styles does not work properly. Eg file picker buttons.
.icon-no-spacing a > .icon {
    margin: 0;
}

.icon-large > .icon {
    width: ($icon-width * 2);
    height: ($icon-height * 2);
}