/**
 * -- NOTE: Shared Classes. --
 *
 * Due to the way css-modules handles @imports, refrain from using using
 * CSS selectors in shared.scss. Limit shared files to output-less sass
 * (i.e %placeholders, @mixin, @functions).
 *
 * Shared placeholders are used as a factory to output a predetermined ruleset.
 * Key Takeaway: With css-modules `@extend %class` rules will be duplicated.
 *
 */

$border: 1px solid color('neutral-4');
$focused-border-color: color('secondary-1');
$field-error-color: color('utility-red');

// -- Base Style
%form-field {
  display: flex;
  flex-direction: column;
  align-content: center;

  border: $border;
  background-color: color('primary-2');
}

// -- Mixins
@mixin placeholder() {
  &::placeholder {
    color: color('neutral-2');
    font-weight: 400;
  }
}

/* -- Shared Field Elements -- */
%label {
  @include typography-a-8-bold;

  color: color('primary-3');
  position: relative;
  padding: ru(.5) ru(.75);
}

%field {
  @include typography-b-7;

  padding: rem-calc(12px) rem-calc(18px);
  border: 0;
  -webkit-appearance: none;

  &:focus {
    outline: none;
  }
}

%tooltip-wrapper {
  z-index: 2;
  position: absolute;
  top: ru(.5);
  right: ru(.75);
}

%tooltip-icon {
  position: relative;
  width: ru(.75);
  height: ru(.75);
  cursor: help;
  display: inline-block;
}

/* --  state:focus  -- */
%focused {
  border-color: $focused-border-color;
}

/* --  state:error  -- */
%hasError {
  border: 1px solid $field-error-color;
}