$input-radius: 3px;
$input-padding-vertical: 0.25rem;
$input-padding-horizontal: 0.5rem;
$input-width: 22.5rem;
$input-border-width: 1px;
$input-widths: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 30, 40, 50;
// Widest character (capital W) is 1.0065rem wide
$char-max-width: 1.013rem;
// Widest number (4) is 0.607rem wide
$num-max-width: 0.607rem;
// Not the width of a space, the width of the space between characters with no spaces between
$char-space-width: 0.033rem;
// Space width
$nbsp-width: 0.288rem;

@mixin input-width($class-name, $char-width: $char-max-width) {
    @each $width in $input-widths {
        .#{str-replace($class-name, '{x}', $width)} {
            max-width: input-width-calc($width, $char-width);
            width: 100%;

            .ons-field__group & {
                width: input-width-calc($width, $char-width);
            }

            @if $width <= 10 {
                .ons-input-type & {
                    width: input-width-calc($width, $char-width);
                }
            }
        }
    }
}

@function input-width-calc($chars: 1, $char-width: $char-max-width, $spaces: 0, $num-chars: 0) {
    // Space between characters is 0.033rem wide
    // Extra 2 pixels are to prevent clipping when the cursor is visible (2px is needed for iOS)

    $padding-width: $input-padding-horizontal * 2;
    $chars-width: $char-width * $chars;
    $num-chars-width: $num-max-width * $num-chars;
    $chars-space-width: $char-space-width * ($chars + $num-chars - 1);
    $spaces-width: $spaces * $nbsp-width;

    @return calc(
        #{$padding-width + $chars-width + $num-chars-width + $chars-space-width + $spaces-width} + #{($input-border-width * 2) + 2px}
    );
}

$iframe-ratios: '16-9', '4-3', '21-9', '1-1', '3-2', '9-16';

@mixin iframe-aspect-ratio($class-name, $ratios: $iframe-ratios) {
    @each $ratio in $ratios {
        .#{str-replace($class-name, '{x}', $ratio)} {
            aspect-ratio: #{str-replace($ratio, '-', '/')};
            width: 100%;
        }
    }
}