@use 'sass:math';
@use './variables' as vars;

// css clr var generator
// #{generateCssVar(red, 100)}: #eb5055;
@function generateCssClrVar($color, $saturate) {
    @return --#{vars.$styles-clr-prefix}-#{$color}-#{$saturate};
}

// css var generator
// #{generateCssVar(table-base-cell, suffix-icon, size)}: 1rem;
@function generateCssVar($component-name, $element, $style-token) {
    @return --#{vars.$styles-prefix}-#{$component-name}-#{$element}-#{$style-token};
}

// convert hex to rgb values
// #{convert-hex-to-rgb-values(#ab2727)}: 171, 39, 39;
@function convert-hex-to-rgb-values($hex) {
    $r: red($hex);
    $g: green($hex);
    $b: blue($hex);

    @return $r + ', ' + $g + ', ' + $b;
}

// px to rem
// font-size: rem(16);
$browser-context: 16;
@function rem($valueRem, $context: $browser-context) {
    @return #{math.div($valueRem, $context)}rem;
}

// media query
// @include media-breakpoint-down($device-sm) { font-size: 1rem; }
@mixin media-breakpoint-up($size) {
    @media screen and (min-width: $size) {
        @content;
    }
}

@mixin media-breakpoint-down($size) {
    @media screen and (max-width: $size - 1) {
        @content;
    }
}

@mixin flex-column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@mixin visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
    pointer-events: none;
}