// Import all the tools needed to customize the theme and extract parts of it
@import '../core/src/style/normalize';
@import '../core/src/theming/theming';

// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin bom-app-theme($theme) {
  // Extract whichever individual palettes you need from the theme.
  //$primary: map-get($theme, primary);
  //$accent: map-get($theme, accent);
  //
  //.bom-app {
  //  background-color: wpt-color($primary);
  //  border-color: wpt-color($accent, A400);
  //}

  .bom-wrapper {
    max-width: 1240px;
    margin: 0 auto 3em;
    overflow: hidden;

    &--grey {
      width: 100%;
      margin: 0;
      background-color: $lightgrey;
      padding-bottom: 3em;

      .bom-wrapper {
        margin-bottom: 0;
      }
    }
  }

  /* Colors */
  /* TODO separate this and change to a mixin */
  .color-green {
    color: $green;
  }

  .color-blue {
    color: $blue;
  }
  .color-orange {
    color: $orange;
  }

  .color-red {
    color: $red;
  }

  .error {
    display: block;
    color: $red;
  }

  .invalid {
    color: $red;
  }

  .buttonIcon,
  .buttonText {
    border: 0;
    background: none;
    display: inline-block;
    padding: 0;
    text-align: left;
    -webkit-appearance: none;
  }
}