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


@use "../variables/" as var;
@use "../mixins/" as mixins;


.unl .dcf-app-form {
  max-width: #{var.$ms26}em; // Restrict width of search form in wide viewports
}


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


@include mixins.mq(md, max, width) {

  .unl.app .dcf-app-controls ul:not(:last-child) {
    flex-direction: column;
  }

}


@include mixins.mq(md, min, width) {

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

  .unl.app .dcf-app-controls ul:not(:last-child) {
    border-left: 1px solid var.$border-color-app-control;
    display: flex;
  }

  .unl.app .dcf-app-controls li {
    border-right: 1px solid var.$border-color-app-control;
  }

}

// TODO: add button focus/hover states
