// Name:            Input
// Description:     Input text in website's forms
//
// Component:       `c-form-input`
//
// ========================================================================
@use '../../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../../assets/sass/settings/v7/global' as *;

@use '../../../../assets/sass/tools/v7/mq' as *;
@use '../../../../assets/sass/tools/v7/utils' as *;
@use '../../../../assets/sass/tools/v7/typography' as *;
@use '../../../../assets/sass/tools/v7/zindex' as *;

// @use '../../../../assets/sass/objects/v7/links' as *;
// @use '../../../../assets/sass/objects/v7/icons' as *;

// Variables
// ========================================================================

$input-outline-size: 3px;
$input-min-small-height: 38px;
$input-min-default-height: 48px;

// ========================================================================

select,
input[type] {

  //
  // Sizes
  //

  &.c-form-size--small {
    --form-input-padding: #{$padding-xsmall} #{$padding-small};
    min-height: $input-min-small-height;
    @include type(label-07);
  }
  
  &.c-form-size--wide {
    @include type(title-05);
  }
}