/* Fix auto zooming on forms */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select,
  textarea,
  input {
    font-size: 16px !important;
  }
}

[role="list"],
lmnhq-panel form,
lmnhq-dialog form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  flex-basis: 100%;
}

lmnhq-menu-button input,
form label,
form input,
form select,
form select option,
form textarea,
form button {
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  width: 100%;
  padding: 0;
  border: 0;
  display: inline-block;
  margin: 0;
}

form input,
form select,
form textarea,
form button {
  line-height: var(--height-input-field);
  background-color: var(--color-input-bg);
  border-radius: var(--container-border-radius);
  border-width: var(--width-input-border);
  border-style: solid;
  border-color: var(--color-input-border);
  padding: 0 var(--padding-input-x);
  width: calc(
    100% - (var(--width-input-border) * 2) - (var(--padding-input-x) * 2)
  );
}

form textarea {
  min-height: 10rem;
  resize: vertical;
}

form > textarea {
  width: calc(
    100% - (var(--width-input-border) * 2) - (var(--padding-input-x) * 2) -
      (var(--padding-panel) * 2)
  );
}

form input[type="color"] {
  padding: 0;
  border-radius: var(--container-border-radius);
  width: 100%;
}

form button,
form select {
  height: var(--height-input-field);
  cursor: pointer;
  /* Required for selects */
  width: 100%;
}

lmnhq-menu-button input,
form input {
  height: calc(var(--height-input-field) - (var(--width-input-border) * 2));
}

form label {
  cursor: pointer;
  margin-top: var(--padding-panel);
}

form input + input {
  margin-top: var(--padding-panel);
}

form input[type="hidden"] + input,
form label + input {
  margin-top: 0;
}

:not([disabled]):focus {
  outline: none !important;
  border-color: var(--color-input-border-focused);
}

::-moz-focus-inner {
  border: 0 !important;
}

form button {
  text-align: center;
  font-weight: var(--font-weight-bold);
  background-color: var(--color-ok);
  border-color: var(--color-ok-hover);
  color: var(--color-ok-text);
  margin: 0;
  position: relative;
}

.fc-button-group button + button:after,
form button:not(.last) + button:after {
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.15);
  display: block;
  content: "";
}

form button:hover {
  background-color: var(--color-ok-hover);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled).fc-button-active:hover,
form button[disabled],
form button[disabled]:hover {
  cursor: default;
  color: var(--color-cancel) !important;
  background-color: var(--color-cancel-hover) !important;
}

form div > button:only-child {
  margin-top: var(--padding-panel);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
lmnhq-paginated-search button:first-of-type,
form button.cancel,
form button[disabled],
form button[data-action^="cancel"] {
  background-color: var(--color-cancel);
  border-color: var(--color-cancel-hover);
}

form button.cancel,
form button[data-action^="cancel"]:hover,
form button[data-action="prev-panel"]:hover {
  background-color: var(--color-cancel-hover);
}

[data-action*="delete"]:hover,
button.delete:hover {
  background-color: var(--color-delete-hover) !important;
}

[data-action*="delete"],
button.delete {
  border-color: var(--color-delete) !important;
  background-color: var(--color-delete) !important;
}

button.align-right,
.align-right button:only-child {
  margin-top: var(--padding-panel);
}

/* 
Defining these so we don't need container elements for every input item 
Similar definitions for other elements are defined in base.css
*/
@media screen and (min-width: 33rem) {
  input.half,
  select.half {
    flex-basis: calc(
      (
          100% - (var(--padding-panel) * 3) - (var(--width-input-border) * 4) -
            (var(--padding-input-x) * 4)
        ) / 2
    );
  }

  input.third,
  select.third {
    flex-basis: calc(
      (
          100% - (var(--padding-panel) * 2) - (var(--width-input-border) * 6) -
            (var(--padding-input-x) * 6)
        ) / 3
    );
  }

  input.quarter,
  select.quarter {
    flex-basis: calc(
      (
          100% - (var(--padding-panel) * 3) - (var(--width-input-border) * 8) -
            (var(--padding-input-x) * 8)
        ) / 4
    );
  }

  form div > button:only-child {
    margin-top: calc(var(--height-input-field) + var(--padding-panel));
  }
}

lmnhq-menu-button[valid="false"] ul li:first-of-type,
lmnhq-menu-button.error ul li:first-of-type,
textarea.error,
select.error,
input.error {
  box-shadow: inset 0 0 0.1rem 0.1rem rgba(255, 0, 0, 0.5);
  border-color: var(--color-delete);
}

/* add bottom margin to final elements in form */
form > :last-child {
  margin-bottom: var(--padding-panel);
}

/* 
  If it's a direct ancestor of an element with an action-uri then 
  a link is probably laid out in flex with form elements, and should
  needs its line-height set to ensure baseline rhythms
*/
[action-uri] > p > a:only-child {
  line-height: var(--height-input-field);
}

form > textarea:only-child {
  margin-top: var(--padding-panel);
  min-height: 10rem;
}

form div span[data-bind] {
  /* +2px for border */
  line-height: calc(var(--height-input-field) + 2px);

  /* I think we're removing it elsewhere? */
  line-height: calc(var(--height-input-field));
}

form div span[data-bind-type="background-color"] {
  margin-top: 2px;
}

[role="listitem"] {
  position: relative;
  display: flex;
}

.card form,
[role="listitem"] form,
lmnhq-paginated-cell form {
  display: block;
  position: absolute;
  overflow: auto;
  bottom: 0;
  left: 0;
  right: 0;
}

lmnhq-paginated-cell form.top {
  bottom: unset;
  top: 0;
}

.card form button,
[role="listitem"] form button,
lmnhq-paginated-cell form button {
  font-size: var(--font-size-small);
  line-height: var(--height-line-small);
  height: var(--height-line-small);
  font-weight: var(--font-weight-normal);
  display: block;
  float: right;
  width: auto;
  margin-left: var(--padding-panel);
  margin-bottom: 0;
  border-width: 0;
}

[role="listitem"] form :last-child,
lmnhq-paginated-cell form :last-child,
[role="listitem"] form button,
lmnhq-paginated-cell form button {
  margin: 0;
}

div > figcaption > span[data-bind] {
  display: inline;
}

progress {
  display: block;
  width: calc(100% - (var(--width-input-border) * 2));
  border: var(--width-input-border) solid var(--color-input-border);
  border-radius: var(--container-border-radius);
  height: var(--height-input-field);
  background-color: var(--color-input-bg);
}

progress::-webkit-progress-bar {
  border-radius: var(--container-border-radius);
  background-color: var(--color-input-bg);
}

progress::-webkit-progress-value {
  background-color: var(--color-ok);
  border-radius: var(--container-border-radius);
}

progress::-moz-progress-bar {
  border-radius: var(--container-border-radius);
  background-color: var(--color-ok) !important;
}

form select:disabled,
form input:disabled {
  opacity: 0.5;
}