@use "../stylesheets/stylesheets.component" as component;
@use "../stylesheets/stylesheets.component.color" as color;
@use "../../stylesheets/geometry" as geometry;

header,
h1,
.label-block,
.checkbox-block,
.text-block {
  margin: 0;
  padding: 0;
}

.input-hint {
  color: color.$header-fore-color;
  font-size: 12px;
}

form {
  flex-wrap: nowrap;
}

.form-inline {
  align-items: start;
}

@media only screen and (device-width <= 480px) {
  /* styles for mobile browsers smaller than 480px; (iPhone) (15 chunks) */

  .label-block,
  .checkbox-block,
  .text-block {
    $size: component.$button-size;

    min-width: $size;
    min-height: $size;
    width: $size;
    height: $size;
    max-height: $size;
    max-width: $size;
  }

  header,
  h1 {
    $size: component.$button-size;

    min-height: $size;
    height: $size;
    max-height: $size;
  }

  .text-block {
    visibility: collapse;
  }
}