@import '@unistylus/core';

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

  .form-label {
    display: inline-block;
    margin-bottom: m('/', 2);
    font-weight: normal;
  }

  .form-control {
    display: block;
    width: 100%;
    padding: p('*', .375) p('*', .75);
    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-tertiary);

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

    &:focus {
      outline: 0;
      border-color: var(--app-color-tertiary-shade);
      box-shadow: 0 0 0 .25rem rgba(var(--app-color-tertiary-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;
      }
    }
  }

}