@use './variables';
//
// Scaffolding
// --------------------------------------------------

// Reset the box-sizing
//
// Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing
* {
    box-sizing: border-box;
}
*:before,
*:after {
    box-sizing: border-box;
}

// Body reset

html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    height: 100%;
}

body {
    font-family: variables.$font-family-base;
    font-size: variables.$font-size-base;
    line-height: 1.4;
    color: variables.$text-color;
    background-color: variables.$body-bg;
    height: 100%;
}

// Reset fonts for relevant elements
input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

// Links
a {
    color: variables.$link-color;
    text-decoration: none;
}

// Images
img {
    vertical-align: middle;
}

// Horizontal rules
hr {
    margin-top: 24px;
    margin-bottom: 24px;
    border: 0;
    border-top: 1px solid variables.$hr-border;
    width: 100%;
}

// iOS "clickable elements" fix for role="button"
//
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
// for traditionally non-focusable elements with role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
[role='button'] {
    cursor: pointer;
}

.cursor-pointer {
    cursor: pointer;
}

svg {
    overflow: visible;
}