/*
 * Functions
 */
.background-image(@relative-image-url) {
    background: url('../@{relative-image-url}');
}

/*
 * Classes
 */

/* Utilities */
.space-top-small { margin-top: 10px }
.space-top { margin-top: 20px }
.space-top-huge { margin-top: 40px }

.space-bottom-small { margin-bottom: 10px }
.space-bottom { margin-bottom: 20px }
.space-bottom-huge { margin-bottom: 40px }

/* Responsive tables: No more tables. Needs JS to work! */
.no-more-tables {
    display: block;
    thead, tbody, th, td, tr { display: block; }
    thead { display: none }
    tr { border: 1px solid #ccc; }
    td::before { content: attr(data-td-title) + ': '; width: 50%; font-weight: bold; }
}

/* Bootstrap fixes */
.btn { outline: none !important }

.form-group label[for] { cursor: pointer }

.numeric-input { text-align: right }

/* Modal */
.modal {
    .modal-content {
        border: none;
        border-radius: 3px;
        box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25), 0 25px 55px 0 rgba(0, 0, 0, 0.20);
    }
    .modal-body {
        padding-top: 30px;
    }
}

/* Spoiler */
.spoiler-wrapper { 
    margin: 20px 0; padding: 0 10px;
    &.show { padding-bottom: 10px; }
    .spoiler-toggle { padding: 10px 0; cursor: pointer }
    .spoiler-toggle::before { content: "\f0fe"; font-family: Font Awesome\ 5 Free; }
    &.show {
        .spoiler { height: auto; overflow: visible; }
        .spoiler-toggle::before { content: "\f146"; }
    }
}
.spoiler { height: 0; overflow: hidden; }

/* Form validation errors */
.form-errors li[data-field] { cursor: pointer }

/* Model table */
.table[data-model-table="1"][data-brighten-first="1"] tr td:first-child { color: silver }
.table[data-model-table="1"] tr td:last-child { width: 1%; white-space: nowrap; }
.table[data-model-table="1"] th a::after { content: "\f0dc"; padding-left: 10px; font-family: Font Awesome\ 5 Free; visibility: hidden }
.table[data-model-table="1"] th a:hover::after { visibility: visible }
.table[data-model-table="1"] th a.sorting-asc::after { content: "\f0d8"; visibility: visible; padding-left: 10px; font-family: Font Awesome\ 5 Free; }
.table[data-model-table="1"] th a.sorting-desc::after { content: "\f0d7"; visibility: visible; padding-left: 10px; font-family: Font Awesome\ 5 Free; }
