@import '@unistylus/core';

.form-group-warning-xl {
  display: block;
  width: 100%;

  .form-label {
    display: inline-block;
    margin-bottom: m('/', 2);
    font-weight: normal;
    font-size: calc(1.5 * var(--app-size-font));
  }

  .form-control {
    display: block;
    width: 100%;
    background: var(--app-color-background);
    border-radius: var(--app-size-radius);
    color: var(--app-color-foreground);
    border: var(--app-size-border) solid var(--app-color-warning);
    padding: p('*', .375 * 1.5) p('*', .75 * 1.5);
    font-size: calc(1.5 * var(--app-size-font));

    & + & {
      margin-top: m('*', .5);
    }

    &:focus {
      outline: 0;
      border-color: var(--app-color-warning-shade);
      box-shadow: 0 0 0 calc(1.5 * .25rem) rgba(var(--app-color-warning-rgb), .3);
    }

    &:disabled, &[readonly] {
      opacity: 1;
      border-color: var(--app-color-medium);
      background: var(--app-color-background-shade);
    }

    &[type=file] {
      overflow: hidden;

      &:not(:disabled):not([readonly]) {
        cursor: pointer;
      }
    }
  }
}