// Utility classes
// -------------------------

// Angular specific
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

// Quick floats
.pull-right {
    float: right;
}
.pull-left {
    float: left;
}
.pull-left-10x {
    float: left;
    padding: 10px;
}
.pull-right-10x {
    float: right;
    padding: 10px;
}

// Toggling content
.hide {
    display: none;
}
.show {
    display: block;
}

// Visibility
.invisible {
    visibility: hidden;
}

// Preview feature elements
.beta-hide {
    display: none !important;
}

.sd-blue {
    color: $sd-blue;
}
// Blue text in input + blue placeholder
.blue-text {
    color: #419fc6 !important;
    &::-webkit-input-placeholder {
        color: #419fc6 !important;
    }
    &:-moz-placeholder {
        color: #419fc6 !important;
    }
    &::-moz-placeholder {
        color: #419fc6 !important;
    }
    &::-ms-input-placeholder {
        color: #419fc6 !important;
    }
}

// Remove background
.no-bg {
    background: none !important;
    &:hover {
        background: none !important;
    }
}

.uppercase {
    text-transform: uppercase;
}

// discreet text used for explaining e.g. what effects a particular setting has
.discreet {
    color: #888;
}


ul.list-view.list-without-items {
    li {
        line-height: 38px;
        text-align: center;
        color: #999;
    }
}

.sd-grid-list.list-without-items {
    li {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.16);
        display: flex;
        line-height: 38px;
        align-content: center;
        justify-content: center;
        text-align: center;
        color: #999;
        border-radius: 3px;
    }

}

.space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-row {
    display: flex;
    align-items: center;
}

.text-red {
    color: #e51c23;
}

.sibling-spacer-4 {
    > * + * {
        margin-left: 4px;
    }
}

.sibling-spacer-10 {
    > * + * {
        margin-left: 10px;
    }
}

// preview HTML generated via WYSIWYG editor in a single line
.user-html-in-single-line {
    p {
        display: inline;
    }
}


// SPACER START

.sd-spacer {
    display: flex;
}


// type
.sd-spacer--horizontal {
    flex-direction: row;
}

.sd-spacer--vertical {
    flex-direction: column;
}

// align
.sd-spacer--start {
    align-items: flex-start;
}

.sd-spacer--center {
    align-items: center;
}

.sd-spacer--end {
    align-items: flex-end;
}

.sd-spacer--stretch {
    align-items: stretch;
}

// spacing
.sd-spacer--horizontal-medium > * + * {
    margin-left: 10px;
}

.sd-spacer--vertical-medium > * + * {
    margin-top: 10px;
}

.css-table {
    display: table;

    > .tr {
        display: table-row;

        > .td {
            display: table-cell;
        }
    }
}

.small-tag {
    font-size: 12px;
    color: #000;
    background-color: #f5f5f5;
    padding: 3px 6px;
    border-radius: 2px;
}

// SPACER END


.hover-AB:hover .hover-AB--A,
.hover-AB:not(:hover) .hover-AB--B {
    display: none!important;
}

@media print
{    
    .no-print
    {
        display: none!important;
    }
}

.icon-button--small {
    padding: 0;
    margin: 0;
    line-height: 1;

    &:hover, &:active {
        [class^="icon-"], [class*=" icon-"] {
            color: $sd-blue;
        }
    }
}