import { styled } from 'styleh-components';
/**
 * @todo add like `styled.highlight` for just template string...
 * @see https://codepen.io/terkel/pen/dvejH
 * @tutorial https://material.io/guidelines/usability/accessibility.html#accessibility-implementation
 */
export default styled.css `
  .blue-button,
  .green-button,
  .ghost-button {
    .button-text {
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: capitalize;
    }
  }

  .icon-left {
    svg,
    .icon {
      order: -1;
    }
  }
  .icon-right {
    svg,
    .icon {
      order: 10;
    }
  }

  /* === standard button === */

  [role='button'],
  input[type='submit'],
  input[type='reset'],
  input[type='button'],
  button {
    display: inline-flex;
  }
  /* Make 'a' like a button */
  [role='button'] {
    color: inherit;
    cursor: default;
    text-align: center;
    text-decoration: none;
    white-space: pre;
  }
  input::-moz-focus-inner,
  button::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
  /* Reset 'button' and button-style 'input' default styles */
  input[type='submit'],
  input[type='reset'],
  input[type='button'],
  button {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    /* for input */
    -webkit-appearance: button;
    -moz-appearance: none;
    /* for button */
    user-select: none;
  }
  button[type='submit'],
  input[type='submit'],
  button[type='reset'],
  input[type='reset'] {
    justify-content: center;
    align-items: center;
  }

  /**
    * @todo - this is from blue-button
    * but here, am applying default for all submit
    * which may change independent
    */
  button[type='submit'] {
    padding: var(--spacing-medium);
    text-align: center;
    border-radius: 4px;
    font-weight: 900;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background-color: var(--color-blue);
    color: var(--color-pure-white);
  }
`;
//# sourceMappingURL=styles.js.map