////
/// @group site.misc
////

@use '../utils' as *;
@use './media-query' as *;
@use './color' as *;
@use 'config' as *;

/// PUBLIC API

/// Creates a css clamp value that scales in vw units from $min to $max. The vw value is calculated
/// such that it will have the $max value when the screen is $at-width wide.
///
/// @example
/// font-size: scale-vw(18px, 36px, 1200px) => font-size: clamp(18px, 3vw, 36px)

@function scale-vw($min, $max, $at-width: null) {
    @if (not is-length($at-width)) {
        $at-width: if-null($at-width, get('container.width'));
    }

    @return clamp(#{$min}, #{round-d(divide($max, $at-width), 5) * 100vw}, #{$max});
}

/// Creates a css clamp value that scales in vh units from $min to $max. The vh value is calculated
/// such that it will have the $max value when the screen is $at-height height.
///
/// @example
/// font-size: scale-vw(18px, 36px, 1200px) => font-size: clamp(18px, 3vh, 36px)

@function scale-vh($min, $max, $at-height) {
    @return clamp(#{$min}, #{divide($max, $at-height) * 100vh}, #{$max});
}

/// Gets a z-index value from preconfigured options.
///
/// @example
/// font-size: scale-vw(18px, 36px, 1200px) => font-size: clamp(18px, 3vh, 36px)
// ---------------------------------------------------------------------------

@function z($layerName, $offset: 0) {
    $z: get('z.' + $layerName, 0);
    @return $z + $offset;
}

/// Creates a standardized container based on site container settings.
///
/// @example
///  @include container();

@mixin container() {
    width: 100%;
    max-width: get('container.width');
    padding: 0 get('container.padding');
    margin: 0 auto;
    position: relative;
    @include media-until-mobile() {
        padding-left: get('container.padding-mobile', null);
        padding-right: get('container.padding-mobile', null);
    }
}

/// Creates a standardized link based on site settings
///
/// @example
///  @include link();

@mixin link() {
    @include css-map(get('links'));
}

// ----------------------------------------------------------------------------
// Control Resets
// ----------------------------------------------------------------------------

/// Resets the appearance of controls with some opinionated defaults (see source or
/// output for details). Typically used as part of restyling a component.

@function reset-control($overrides: ()) {
    @return flat-merge(
        (
            appearance: none,
            box-sizing: border-box,
            position: relative,
            outline: none,
            border: none,
            white-space: nowrap,
            background-color: transparent,
            font-size: get('controls.base.font-size'),
            font-family: get('controls.base.font-family'),
            font-weight: get('controls.base.font-weight'),
        ),
        $overrides
    );
}

@mixin reset-control($overrides: ()) {
    @include css-map(reset-control($overrides));
}

/// Resets the style of control much more aggressively than regular control-reset. Really cleans
/// things out!

@function reset-control-hard($overrides: ()) {
    @return flat-merge(
        (
            appearance: none,
            display: block,
            outline: none,
            border: none,
            border-radius: 0,
            background: none transparent,
            padding: 0,
            width: auto,
            height: auto,
            border-spacing: 0,
            text-align: left,
            text-indent: 0,
            line-height: initial,
            color: initial,
            font-family: initial,
            font-size: initial,
        ),
        $overrides
    );
}

@mixin reset-control-hard($overrides: ()) {
    @include css-map(reset-control-hard($overrides));
}