@use "variables" as *;

div.validation-error {
  color: $warning;
}

@media (prefers-color-scheme: dark) {
  div.validation-error {
    color: $error-dark;
  }
}

// Additional border colors based upon UNL WDN standard colors
$border-colors: (
  "cerulean": #42a7c6,
  "green": #00784e
);

@each $name, $color in $border-colors {
  .unl-b-#{$name} {
    border-color: #{$color};
  }
}

@for $i from 1 through 12 {
  .csmce-col-#{$i} {
    grid-column: span $i;
  }
}

@for $i from 1 through 12 {
  @each $name, $width in $mq-breakpoints {
    .csmce-col-#{$i}-#{$name} {
      @media(min-width: $width) {
        grid-column: span $i;
      }
    }
  }
}

@each $name, $width in $mq-breakpoints {
  .csmce-d-none-#{$name} {
    @media(min-width: $width) {
      display: none;
    }
  }
}

.unl .csmce-btn-sm {
  font-size: .8em;
  padding: .65em;
  min-height: 2.8em;
  min-width: 2.8em;
}

$section-types: (
  "question",
  "fieldset",
  "band",
  "step"
);

.button-link {
  color: var(--hover);
  background: none;
  text-decoration: underline;
  border: none;
}

@each $section in $section-types {
  .csmce-#{$section} {}
}

.csmce-pt-label {
  padding-top: 1.6rem;
}

.device-frame {
  border: 1px solid #6d6d69;
  margin-bottom: .25em;
  padding: .24em;
  border-radius: 15px;
  display: block;
  height: 200px;
}

.device-frame figcaption {
  background-color: transparent;
  text-align: center;
  padding: .5em;
  margin-top: 140px;
}

.choose-question-caption {
  background-color: transparent;
  text-align: center;
  font-size: smaller;
  width: 100%;
  margin-bottom: 1em;
}

.long-checkbox {
  overflow-wrap: anywhere;
}

.unl .rank-in-order-selections {
  width: 95px;
  display: inline-block;
  margin: 5px;
}

.move-cursor {
  cursor: move;
}

.sortable-drag {
  display: block;
  list-style-type: none;
  margin-bottom: .2em;
  background-color: var(--bg-card);
  border-radius: 3px;
  border: 1px solid var(--bg-light-gray);
  cursor: move;
  padding-top: 7px;
  padding-bottom: 10px;
  padding-left: 20px;
}

.sortable-drag:hover {
  border-color: var(--bg-black)
}

.sortable-move {
  display: block;
  list-style-type: none;
  margin-bottom: 0;
  padding-bottom: .2em;
}

$choose-question-images: (
  "datepicker",
  "dropdown",
  "fileupload",
  "informationSection",
  "multiselect",
  "radiobutton",
  "textarea",
  "textbox",
  "rankInOrder"
);

@each $image in $choose-question-images {
  .csmce-choose-#{$image} {
    background-image: url('../images/choose-question/#{$image}.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
  }

  @media (prefers-color-scheme: dark) {
    .csmce-choose-#{$image} {
      background-image: url('../images/choose-question/#{$image}_dark.png');
    }
  }
}