/* ==========================================================================
 * Editable
 * ========================================================================== */

/* Should be applied to any element containing .mds-c-editable to ensure correct height */
.mds-has-editable {
  --mds-v-editable__spacing: var(--mds-d-spacing--sm);

  margin: calc(var(--mds-v-editable__spacing) * -1);
  overflow: hidden;
  padding: var(--mds-v-editable__spacing);
}

.mds-c-editable {
  --mds-v-editable__box-shadow--border: 0 0 0 1px
    var(--mds-v-editable__border-color, transparent) inset;
  --mds-v-editable__box-shadow--shadow: var(--mds-d-elevation--3);
  --mds-v-editable__border-color: transparent;
  --mds-v-editable__icon-gap: 0.25em;
  --mds-v-editable__icon-size: 1.25em;
  --mds-v-editable__max-width: calc(
    100% + (var(--mds-v-editable__padding-horizontal) * 2)
  );
  --mds-v-editable__padding-horizontal: var(--mds-d-spacing--xs);
  --mds-v-editable__padding-vertical: var(--mds-d-spacing--xs);

  background-color: var(--mds-v-editable__background-color);
  border-radius: var(
    --mds-v-editable__border-radius,
    var(--mds-d-border-radius--default)
  );
  color: inherit;
  cursor: var(--mds-v-editable__cursor, text);
  display: inherit;
  flex-shrink: 1;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: calc(var(--mds-v-editable__padding-vertical) * -1)
    calc(var(--mds-v-editable__padding-horizontal) * -1);
  max-width: none;
  outline: none;
  overflow: hidden;
  padding: 0;
  position: relative;
  resize: none;
  text-align: left;
  transition-duration: 0.15s;
  transition-property: background-color, border-color, box-shadow;
  transition-timing-function: ease-out;
  width: var(--mds-v-editable__max-width);
  z-index: 1;

  &:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--mds-t-border-color--accent);
    outline-offset: -2px;
  }

  &.mds-is-editable {
    &:hover {
      --mds-v-editable__border-color: var(--mds-t-border-color--primary);

      box-shadow: var(--mds-v-editable__box-shadow--border);
    }
  }

  &.mds-is-editing {
    --mds-v-editable__border-color: var(--mds-t-border-color--primary);

    box-shadow: var(--mds-v-editable__box-shadow--border);

    &:focus-within {
      --mds-v-editable__background-color: var(
        --mds-t-background-color--primary
      );
      --mds-v-editable__border-color: var(--mds-t-border-color--accent);

      box-shadow: var(--mds-v-editable__box-shadow--border),
        var(--mds-v-editable__box-shadow--shadow);
    }
  }

  > .mds-c-buttons {
    flex-shrink: 0;
    padding: var(--mds-d-spacing--xs) var(--mds-d-spacing--sm);
  }
}

.mds-c-editable__label {
  @mixin mds-m-screenreader-text;
}

.mds-c-editable__control {
  color: inherit;
  display: block;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: var(--mds-v-editable__padding-vertical)
    var(--mds-v-editable__padding-horizontal);
  resize: none;
  width: 100%;

  &--longform {
    overflow-wrap: break-word;
    white-space: pre-wrap;
  }

  &--placeholder {
    color: var(--mds-t-text-color--tertiary);
  }

  &:focus,
  :focus-visible & {
    box-shadow: none;
    outline: none;

    &::placeholder {
      color: var(--mds-t-text-color--accent);
    }
  }
}

.mds-c-editable__actions {
  display: flex;
  justify-content: flex-end;
  padding: var(--mds-d-spacing--sm);
  padding-top: var(--mds-d-spacing--xs);
  width: 100%;

  &--hidden {
    @mixin mds-m-screenreader-text;
  }
}

/* 
  Add WCAG Reflow Compliance 
  While WCAG Reflow (SC 1.4.10) specifically requires support up to 400% zoom,
  applied reflow styles starting at 250% zoom, since some elements are cut off
  or difficult to use even at that level.
  At 250% zoom on a 1280px screen, the effective CSS width is about 512px.
*/
@media (max-width: $reflow-zoom-level--250) {
  .mds-c-editable {
    max-width: 100%;
  }
}