Yrkki/cv-generator-fe

@use "sass:math";

@import "../stylesheets/stylesheets.component.color.scss";
@import "../stylesheets/stylesheets.component.sizing.scss";
@import "../stylesheets/stylesheets.component.columns.scss";
@import "../stylesheets/stylesheets.component.print.scss";
@import "../stylesheets/stylesheets.component.screen.scss";

:root {
    --button-size: 35px;
    --box-shadow-depth: calc(var(--appearance-3d) * 10px);
}

$button-size: var(--button-size);

$border-radius: 0.25rem !default;

body {
    color: $primary-color;

    background-color: $primary-background-color;
    background-position: left top;
    background-size: 100% 100%;
    background-repeat: repeat;
}

.emoji {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

// $material-icon-size: 24px;
.text-icons {
    font-family: monospace; // 'Material Icons', sans-serif;
    font-weight: normal;
    font-style: normal;
    // font-size: $material-icon-size;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    // -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

@for $i from 1 through 6 {
    h#{$i} {
        page-break-after: avoid;

        margin-top: 4px;

        color: $outline-color;
        &:hover {
            color: $dark-outline-color;
        }
        min-width: 100%;
        .header-link {
            box-sizing: border-box;
            display: inline-block;
            // margin-left: -$material-icon-size + 6px; // -42px;
            text-decoration: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            // vertical-align: middle;
            // visibility: hidden;
            @media (max-width: 768px) {
                float: right;
                margin-left: 0;
            }
        }
        // &:hover .header-link {
        //     visibility: visible;
        // }
    }
}

div[class^="col-"],
div[class*=" col-"] {
    padding: 5px;
    border: 2px solid $table-border-color;
    color: $primary-color;
}

.row {
    overflow: hidden;
}

.pair-header {
    color: $header-fore-color;
}

div[class^="col-"].cell-key {
    color: $header-fore-color;
    border-color: transparent;
}

div[class^="col-"].cell-value {
    border-color: transparent;
}

.container-fluid.border {
    border: 4px solid $border-color;
}

.disclaimer {
    color: $header-fore-color;
    font-size: 14px;
}

.detail {
    font-size: 16px;
    .detailEmphasis {
        font-style: italic;
    }
}

.detailHanging {
    @extend .detail;
    white-space: pre-wrap;
    margin-left: -0.67em;
    text-indent: 0.67em;
}

.detailHighlight {
    font-weight: bold;
}

.detailHeavyHighlight {
    @extend .detailHighlight;
    text-transform: uppercase;
    letter-spacing: 1pt;
}

$hslCount: 13;
@for $i from 1 through $hslCount {
    $h: math.div(($i + $hslCount*0.5), $hslCount) * 360;
    $s: 70%;
    $l: calc(60% * (1 - var(--contrast-enhancer)));

    .hsl#{$i} {
        color: hsl($h, $s, $l);
        &:hover {
            color: hsl($h, $s, calc(#{$l} * 50%));
        }
    }

    .hsl#{$i}b {
        @extend .hsl#{$i};
        font-weight: 900;
        &:hover {
            // @extend .hsl#{$i}:hover;
            color: hsl($h, $s, calc(#{$l} * 50%));
            font-weight: 900;
        }
    }
}

@mixin hoverHighlight() {
    background-color: $hover-color !important;
    color: $dark-outline-color !important;
}

@mixin appearance3dAware() {
    box-shadow:
        var(--box-shadow-depth) var(--box-shadow-depth) var(--box-shadow-depth)
        calc(-1 * var(--box-shadow-depth)) $rule-color;
}

@mixin appearance3dAwareInset() {
    box-shadow:
        var(--box-shadow-depth) var(--box-shadow-depth) var(--box-shadow-depth)
        calc(-1 * var(--box-shadow-depth)) $rule-color inset;
}

header {
    cursor: pointer;
    border-radius: $border-radius;
    transition: $transition;
    &:hover {
        @include hoverHighlight();
    }
    &.collapsed {
        background-color: $inactive-outline-color;
        @include appearance3dAware();
    }
    @media (max-width: 768px) {
        padding-bottom: 1px;
    }
}

a {
    text-decoration: none;
    padding: 1px;
    color: $outline-color;
    &:hover {
        @include hoverHighlight();
    }
    &.external {
        background-image: url(/assets/images/external.svg);
        background-position: center right;
        background-repeat: no-repeat;
        padding-right: 13px;
    }
}

td a {
    display: block;
}

.frequency {
    cursor: pointer;
    &:hover {
        color: $dark-outline-color !important;
    }
}

.btn {
    &.active,
    &:hover {
        @include hoverHighlight();
    }
}

.collapsed {
    color: $dark-outline-color;
    @include appearance3dAware();
}

.center {
    text-align: center;
}

.thumbnail {
    max-width: 50px;
    max-height: 50px;
    padding: 2px;
}

.btn-square {
    width: $button-size;
    height: $button-size;
    border: 0;
}

.nowrap {
    white-space: nowrap;
}

.clear-both {
    clear: both;
}

.extra-function {
    font-size: 16px;
    line-height: 1.6;
    padding: 3px;
    display: inline-block;

    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;

    .checkbox-inline,
    .radio-inline {
        padding: 5px;
        display: inline-block;
        &:hover {
            @include hoverHighlight();
        }
    }

    label input {
        margin-right: 2px;
    }
}

.form-control[type="number"] {
    width: 5em;
}

.form-control[type="checkbox"] {
    width: 2em;
}

.form-control[type="radio"] {
    width: 2em;
}

#goToTopBtn {
    display: none;

    position: fixed;
    bottom: 55px;
    right: 20px;
    z-index: 99;

    border: none;
    outline: none;

    color: $goToTopBtnColor;
    background-color: $goToTopBtnBackgroundColor;

    cursor: pointer;

    padding: 15px;
    border-radius: 10px;

    font-size: 18px;

    @media (max-width: 768px) {
        right: 32px;
    }
}

.ghost {
    color: $ghost-outline-color;
}

.toolbar {
    float: right;
}

span.more {
    float: right;
}

div.more {
    text-align: right;
}

.navbar-brand-img {
    width: 150px;
}

.text-header {
    color: $header-fore-color;
}

.border-right {
    border-right-color: $header-fore-color !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
}

@import "../stylesheets/stylesheets.component.decorations.scss";