@use 'sass:math';

$browser-context: 13; // Default

// converter
@function pxtoem($target, $context: $browser-context) {
    @return math.div($target, $context) + 0;
}

// border
@mixin button-border($vertical, $horizontal, $border: false) {
    $property: border-#{$vertical}-#{$horizontal}-radius;

    button {
        #{$property}: $border-radius;

        @if $border {
            border-top: $default-border;
        }
    }
}

@mixin focus-outline($offset: 0) {
    outline: var(--cerulean-blue-50) auto 2px;
    outline-offset: $offset;
}

// args are to prevent elements shifting due to differing border dimensions
@mixin focus-border($background: var(--white), $border-radius: 8px, $border-width: 1px) {
    background: $background;
    border: $border-width solid var(--digital-blue-60);
    border-radius: $border-radius;
    outline: none;
    box-shadow: 0 0 0 4px var(--digital-blue-20);
}