Zelda64Recomp/assets/scss/styles/vars/_borders.scss

$border-radius-sm: 8dp;
$border-radius-md: 12dp;
// modals/pages
$border-radius-lg: 16dp;

$border-radius-modal: $border-radius-lg;

$border-width-thickness-num: 1.1;
// $border-width-thickness-num: 1.5;
$border-width-thickness: space($border-width-thickness-num);

@mixin border($col: $color-border) {
    border-width: $border-width-thickness;
    border-color: $col;
}

@mixin border-top($col: $color-border) {
    border-top-width: $border-width-thickness;
    border-top-color: $col;
}

@mixin border-bottom($col: $color-border) {
    border-bottom-width: $border-width-thickness;
    border-bottom-color: $col;
}

@mixin inset-block($inset-amt) {
    position: absolute;
    top: $inset-amt;
    right: $inset-amt;
    bottom: $inset-amt;
    left: $inset-amt;
}

// add this to a child of the container that needs a border.
// parent must have `position: relative` 
@mixin inner-border-block($col: $color-border) {
    @include inset-block($border-width-thickness);
    @include border($col);
    display: block;
}