/**
 * @see https://codepen.io/terkel/pen/dvejH
 * @tutorial https://material.io/guidelines/usability/accessibility.html#accessibility-implementation
 */
import { styled } from 'view-container'

const buttontodos = styled.mixin `
  [role='button'],
  input[type='submit'],
  input[type='reset'],
  input[type='button'],
  button {
    display: inline-flex;
    /* box-sizing: content-box; */
  }
  /* 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: $spacing;
    text-align: center;
    border-radius: $border-radius;
    font-weight: 900;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background-color: $colors-secondary;
    color: $colors-white;
  }
`

export default buttontodos