/**
 * @file
 * Stylesheet for the custom_field custom form display settings.
 */

.custom-field-row {
  --custom-field-gutter-x: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--custom-field-gutter-x)*-.5);
  margin-left: calc(var(--custom-field-gutter-x)*-.5);
}

.custom-field-row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: calc(var(--custom-field-gutter-x)*.5);
  padding-left: calc(var(--custom-field-gutter-x)*.5);
}

.custom-field-col.form-type--number input,
.custom-field-col.form-type--textfield input,
.custom-field-col.form-type--email input,
.custom-field-col.form-type--textarea input,
.custom-field-col.form-type--url input,
.custom-field-col.form-type--tel input,
.custom-field-col.form-type--entity-autocomplete input,
.custom-field-col.form-type--select select {
  width: 100%;
}

.custom-field-col > .form-type--textarea {
  margin-top: 0;
}

.custom-field-row > .custom-field-col-auto {
  flex: 0 0 auto;
  width: auto;
}

.custom-field-row > .custom-field-col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.custom-field-row > .custom-field-col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.custom-field-row > .custom-field-col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.custom-field-row > .custom-field-col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.custom-field-row > .custom-field-col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.custom-field-row > .custom-field-col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.custom-field-row > .custom-field-col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.custom-field-row > .custom-field-col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.custom-field-row > .custom-field-col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.custom-field-row > .custom-field-col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.custom-field-row > .custom-field-col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.custom-field-row > .custom-field-col-12 {
  flex: 0 0 auto;
  width: 100%;
}

/* 768px on Seven theme */
@media all and (max-width: 48em) {
  .custom-field-flex--stack-medium .custom-field-col {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* 600px on Seven theme */
@media screen and (max-width: 37.5em) {
  .custom-field-flex--stack-small .custom-field-col {
    flex: 0 0 auto;
    width: 100%;
  }
}