/* ==========================================================================
 * Control - Mixins
 * ========================================================================== */

@define-mixin mds-m-control {
  @mixin mds-m-text--size-med;

  --mds-t-background-color: transparent;
  --mds-v-control__border: 0 0 0 1px var(--mds-v-control__border-color) inset;
  --mds-v-control__border-color: var(--mds-t-border-color--primary);
  --mds-v-control__color: var(--mds-t-text-color--primary);
  --mds-v-control__icon-gap: 0.25em;
  --mds-v-control__icon-size: 1.25em;
  --mds-v-control__margin: calc(var(--mds-v-control__padding--vertical) * -1)
    calc(var(--mds-v-control__padding--horizontal) * -1);
  --mds-v-control__max-width: calc(
    100% + (var(--mds-v-control__padding--horizontal) * 2)
  );
  --mds-v-control__padding--horizontal: var(--mds-d-spacing--xs);
  --mds-v-control__padding--vertical: var(--mds-d-spacing--xs);
  --mds-v-control__placeholder-color: var(--mds-t-text-color--tertiary);
  --mds-v-control__shadow: 0 2px 8px
    var(--mds-v-control__box-shadow-color, transparent);

  background-color: var(--mds-t-background-color);
  border-radius: var(--mds-d-border-radius--default);
  color: var(--mds-v-control__color);
  cursor: var(--mds-v-control__cursor, text);
  display: block;
  margin: var(--mds-v-control__margin);
  max-width: var(--mds-v-control__max-width);
  outline: none;
  overflow: hidden;
  padding: var(--mds-v-control__padding--vertical)
    var(--mds-v-control__padding--horizontal);
  resize: none;
  text-align: left;
  transition-duration: 0.15s;
  transition-property: background-color, border-color, box-shadow;
  transition-timing-function: ease-out;
  width: calc(100% + (var(--mds-v-control__padding--horizontal) * 2));

  &::placeholder {
    color: var(--mds-v-control__placeholder-color);
  }

  & + & {
    margin-top: var(--mds-d-spacing--lg);
  }

  &.mds-has-error:not(:focus) {
    --mds-v-control__color: var(--mds-t-text-color--danger);
    --mds-v-control__placeholder-color: var(--mds-t-text-color--danger);
  }

  &.mds-has-changes:not(:focus) {
    --mds-v-control__color: var(--mds-t-text-color--changes);
  }

  &:focus,
  &:focus-within,
  &:focus-visible {
    --mds-v-control__placeholder-color: var(--mds-t-text-color--accent);

    box-shadow: 0;
  }

  &[disabled],
  &[readonly] {
    --mds-v-control__cursor: default;
  }

  &[disabled] {
    --mds-v-control__color: var(--mds-t-text-color--tertiary);

    opacity: 0.5;
    pointer-events: none;
  }
}

@define-mixin mds-m-control--appearance-flat {
  box-shadow: var(--mds-v-control__shadow);

  &:enter,
  &:focus-visible,
  &:focus-within,
  &.mds-has-error {
    box-shadow: var(--mds-v-control__border), var(--mds-v-control__shadow);
  }

  &:enter {
    --mds-v-control__border-color: var(--mds-t-border-color--primary);
  }

  &.mds-has-error {
    --mds-v-control__border-color: var(--mds-t-border-color--danger);
  }

  &.mds-has-changes {
    box-shadow: var(--mds-v-control__border), var(--mds-v-control__shadow);

    --mds-v-control__border-color: var(--mds-t-border-color--changes);
  }

  &:focus,
  &:focus-visible,
  &:focus-within {
    --mds-v-control__border-color: var(--mds-t-border-color--accent);
    --mds-v-control__box-shadow-color: var(--mds-t-elevation-opacity--3);
    --mds-v-control__placeholder-color: var(--mds-t-text-color--tertiary);
  }
}

@define-mixin mds-m-control--appearance-none {
  &:enter,
  &:focus-visible,
  &:focus-within,
  &.mds-has-error {
    box-shadow: none;
  }

  &.mds-has-changes {
    box-shadow: none;
  }

  &:focus,
  &:focus-visible,
  &:focus-within {
    --mds-v-control__placeholder-color: var(--mds-t-text-color--tertiary);
  }
}

@define-mixin mds-m-control--appearance-bordered {
  --mds-t-background-color: var(--mds-t-background-color--secondary);
  --mds-v-control__border-color: var(--mds-t-border-color--primary);
  --mds-v-control__max-width: 100%;
  --mds-v-control__padding--horizontal: var(--mds-d-spacing--med);
  --mds-v-control__padding--vertical: var(--mds-d-spacing--sm);

  box-shadow: var(--mds-v-control__border), var(--mds-v-control__shadow);
  margin: 0;

  &:enter,
  &:focus-visible,
  &:focus-within {
    --mds-t-background-color: var(--mds-t-background-color--primary);
  }

  &.mds-has-error:not(:focus) {
    --mds-v-control__border-color: var(--mds-t-border-color--danger) !important;

    background-color: var(--mds-t-background-color--danger-muted) !important;
  }

  &.mds-has-changes:not(:focus) {
    --mds-v-control__border-color: var(
      --mds-t-border-color--changes
    ) !important;

    background-color: var(--mds-t-background-color--changes-muted) !important;
  }

  &:focus,
  &:focus-visible,
  &:focus-within {
    --mds-v-control__border-color: var(--mds-t-border-color--accent);
    --mds-v-control__box-shadow-color: var(--mds-t-elevation-opacity--3);
    --mds-v-control__placeholder-color: var(--mds-t-text-color--tertiary);
    --mds-v-control__border: 0 0 0 2px var(--mds-v-control__border-color) inset;
  }

  @media (max-width: $reflow-zoom-level--250) {
    --mds-v-control__padding--vertical: var(--mds-d-spacing--xs);
    --mds-v-control__padding--horizontal: var(--mds-d-spacing--xs);
  }
}