material-components_material-web/field/lib/_shared.scss

//
// Copyright 2021 Google LLC
// SPDX-License-Identifier: Apache-2.0
//

// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.

@use 'sass:map';
@use '../../sass/resolvers';
@use '../../sass/shape';
@use '../../sass/typography';
@use './content';
@use './label';
@use './supporting-text';

@mixin styles() {
  :host {
    display: inline-flex;
  }

  .md3-field {
    display: inline-flex;
    flex: 1;
    flex-direction: column;
    // Allow the use of block/inline reflexive RTL properties without impacting
    // structure when languages change.
    writing-mode: horizontal-tb;
  }

  .md3-field__container {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-basis: var(--_container-height);
    position: relative;
  }

  .md3-field--disabled {
    pointer-events: none;
  }

  // TODO(b/239188049): remove when layout tokens are ready
  .md3-field--with-start .md3-field__start,
  .md3-field--with-end .md3-field__end {
    min-width: 48px;
  }

  .md3-field--with-start {
    .md3-field__start {
      margin-inline-end: 4px;
    }
  }

  .md3-field--with-end {
    .md3-field__end {
      margin-inline-start: 4px;
    }
  }

  @include content.styles;
  @include label.styles;
  @include supporting-text.styles;
}

@function resolve-tokens($tokens) {
  $tokens: typography.resolve-theme(
    $tokens,
    map.get(resolvers.$material, typography),
    label-text,
    label-text-populated,
    supporting-text
  );

  @return shape.resolve-theme(
    $tokens,
    map.get(resolvers.$material, shape),
    container-shape
  );
}