@import "variables";

@mixin render_theme($theme) {
    .uk-offcanvas {
        .uk-nav > li > a {
            &.active {
                color: map_get(map_get($themes, $theme), 'primary');
            }
        }
    }

    .uk-logo img {
        height: 38px;
        border-radius: 50%;
    }

    .uk-button, .uk-input {
        border: none;
        color: map_get(map_get($themes, $theme), 'primary-text');
        text-transform: none;
        border-radius: 5px;
        text-decoration: none;
        background-color: map_get(map_get($themes, $theme), 'primary');
        box-shadow: map_get(map_get($themes, $theme), 'shadow');
        font-weight: bolder;
    }

    .uk-button-link {
        color: lighten(map_get(map_get($themes, $theme), 'primary-text'), 20%);
        font-weight: bolder;
        text-decoration: underline;
    }

    .uk-card {
        border-radius: 5px;
        box-shadow: map_get(map_get($themes, $theme), 'shadow');

        .uk-card-header {
            border-bottom: 1px solid darken(map_get(map_get($themes, $theme), 'primary'), 10%)
        }

        .uk-card-footer {
            border-top: 1px solid darken(map_get(map_get($themes, $theme), 'primary'), 10%)
        }

        .uk-card-title {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
    .uk-card-secondary {
        background: #23272A;
    }

    .uk-border-circle {
        box-shadow: map_get(map_get($themes, $theme), 'shadow');
    }

    @for $i from 1 through 6 {
        .uk-h#{$i}, h#{$i} {
            color: map_get(map_get($themes, $theme), 'primary-text-h')
        }
    }

    @for $i from 10 through 100 {
        @if $i % 10 == 0 {
            .min-height-#{$i}vh {
                min-height: #{$i}vh;
            }

            .max-height-#{$i}vh {
                max-height: #{$i}vh;
            }

            .min-width-#{$i}vw {
                max-width: #{$i}vw;
            }

            .max-width-#{$i}vw {
                max-width: #{$i}vw;
            }
        }
    }

    .uk-switch {
        position: relative;
        display: inline-block;
        height: 24px;
        width: 42px;

        input {
            display: none;
        }
    }

    .uk-switch-slider {
        background-color: rgba(0, 0, 0, 0.22);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        border-radius: 500px;
        bottom: 0;
        cursor: pointer;
        transition-property: background-color;
        transition-duration: .05s;
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07);

        &:before {
            content: '';
            background-color: #fff;
            position: absolute;
            width: 20px;
            height: 20px;
            left: 2px;
            bottom: 2px;
            border-radius: 50%;
            transition-property: transform, box-shadow;
            transition-duration: .05s;
        }
    }

    input:checked + .uk-switch-slider {
        background-color: #39f !important;
    }

    input:checked + .uk-switch-slider:before {
        transform: translateX(18px);
    }

    .uk-switch-slider.uk-switch-on-off {
        background-color: #f0506e;
    }
    input:checked + .uk-switch-slider.uk-switch-on-off {
        background-color: #32d296 !important;
    }

    .uk-switch-slider.uk-switch-big:before {
        transform: scale(1.2);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
    }
    .uk-switch-slider.uk-switch-small:before {
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
    }
    input:checked + .uk-switch-slider.uk-switch-big:before {
        transform: translateX(18px) scale(1.2);
    }

    .uk-text-muted {
        color: map_get(map_get($themes, $theme), 'primary-text-muted') !important;
    }
}

html[data-theme="dark"] {
    @include render_theme('dark')
}

html[data-theme="light"] {
    @include render_theme('light')
}

.uk-label {
    background: rgb(11, 89, 166);
}

.uk-label-success {
    background-color: rgb(22, 101, 72);
}

.uk-label-warning {
    background-color: rgb(145, 66, 4);
}

:not(pre) > code, :not(pre) > kbd, :not(pre) > samp {
    color: rgb(170, 15, 44);
    background-color: rgb(248, 248, 248);
}