@import '../assets/globals.postcss.css';

.button {
  position:   relative;
  width:      calc( 35 * $PX );
  height:     calc( 40 * $PX );
  cursor:     pointer;
  fill:       #FFF;
  display:    inline-block;
  &__ripple {
    position:     absolute;
    left:         0;
    right:        0;
    top:          0;
    bottom:       0;
    z-index:      5;
    overflow:     hidden;
    &:after {
      content:    "";
      position:   absolute;
      left:       0;
      right:      0;
      top:        0;
      bottom:     0;
      z-index:    1;
      cursor:     pointer;
    }
  }
  &:hover {
    opacity:    .85;
  }

  &:active {
    opacity:    1;
  }
}