@use "sass:math";

// import global variables
@import "setup/settings";

// import any additional mixins
@import "setup/helpers";

// import colourscheme
@import "setup/colours";



/* ==========================================================================
   Styling and layout for all media
   ========================================================================== */

@import "modules/base";



/* ==========================================================================
   Styling and layout for screen media
   ========================================================================== */

@media screen {

    // Global
    @import "modules/links";
    @import "modules/typography";
    @import "modules/alerts";
    @import "modules/forms";
    @import "modules/buttons";

    // Layout modules
    @import "modules/container";

    html {
        text-size-adjust: 100%;
    }

    .setup {
        padding: 1em 4% 0;
    }

    .txp-setup {
        max-width: $setup-column;
        margin: 1em auto;
    }

    .ui-icon {
        display: inline-block;
        position: relative;
        width: 16px;
        height: 16px;
        overflow: hidden;
        background-size: 16px 16px;
        vertical-align: text-bottom;
        text-indent: -9999px;
    }

    .success .ui-icon {
        filter: brightness(2) sepia(1) hue-rotate(82deg) saturate(250%) brightness(90%);
    }

    .error .ui-icon {
        filter: brightness(2) sepia(1) hue-rotate(-62deg) saturate(750%) brightness(65%);
    }

    .ui-icon-alert { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M0 15L8 1l8 14H0zM9 5H7v6h2V5zm0 7H7v2h2v-2z'/%3E%3C/svg%3E"); }
    .ui-icon-check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M13 3l-7 7-2-2-2 2 4 4L15 5z'/%3E%3C/svg%3E"); }
}



/* ==========================================================================
   Additional layout for devices < 768px
   ========================================================================== */


@media (max-width: $break-large) {
    .setup {
        padding: 1em 2em 0; // 13px + 26px
    }
}



/* ==========================================================================
   Additional layout for devices < 547px
   ========================================================================== */


@media (max-width: $break-small) {

    /**
     * Prevent zoom upon form element focus.
     */

    html {
        font-size: 16px;
    }
}