<link rel="import" href="../../bower_components/polymer/lib/elements/custom-style.html">


<dom-module id="custom-variables">
  <template>
    <style>
        html {
            --waa-static-width: 355px;
            --waa-border-bottom: 2px solid #117bde;
        }
    </style>
  </template>
</dom-module>

:host(.static-width) {
  label {
    width: 120px !important;
    padding-right: 20px !important;
    text-align: right;
    &::after {
      position: static;
      content: ":";
      opacity: 1;
    }
  }
  [part='input-field'] {
    width: var(--waa-static-width);
    max-width: var(--waa-static-width);
    height: 40px;
  }

  .vaadin-text-field-container {
    flex-direction: row;
  }
}