////////////////////////////
// !THEME / COMPONENTS / APP
////////////////////////////


.unl .dcf-app-form {
  max-width: #{ms(26)}em; // Restrict width of search form in wide viewports
}


.unl.app .dcf-app-controls button {
  background-color: transparent;
  border: 0;
}


@include mq(md, max, width) {

  .unl.app .dcf-app-controls ul {
    flex-direction: column;
  }

}


@include mq(md, min, width) {

  .unl.app .dcf-app-controls {
    display: flex;
    justify-content: space-between;
  }

  .unl.app .dcf-app-controls ul {
    border-left: 1px solid $scarlet-shade;
    display: flex;
  }

  .unl.app .dcf-app-controls li {
    border-right: 1px solid $scarlet-shade;
  }

}

// TODO: add button focus/hover states