/* CONTROLS */

/* Controls --> Link */

.m-ui [m-link] { text-decoration: ; cursor: pointer; }
.m-ui [m-link]:hover {
  text-decoration: underline;
}
.m-ui [m-link]:active {}

/* Controls --> buttons --> default/text */

.m-ui [m-button] {
    display: inline-block;
    outline: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    vertical-align: middle !important;
}

.m-ui [m-button].disabled,
.m-ui [m-button]:disabled {
  cursor: default;
  opacity: .75;
}

/* Controls --> buttons --> Micro */

.m-ui [m-button][m-type=micro] {
  font-size: 0;
  padding: 0 !important;
  background-color: transparent !important; 
}
.m-ui [m-button][m-type=micro].with-icon:before {
    display: block;
    color: inherit;
    line-height: 1.5em;
    padding: 0;
    margin: 0 !important;
}
.m-ui [m-button][m-type=micro]:hover { 
  /*opacity: .8; */
  background-color: transparent !important; 
}
.m-ui [m-button][m-type=micro]:active { 
  box-shadow: none;
  -webkit-box-shadow: none;
}
.m-ui [m-button][m-type=micro]:disabled { 
  opacity: .3; 
  background: transparent;
}

      /* Shadow in click */

      .m-ui [m-button][m-type=micro]:after {
        content: '';
        width: 40px !important;
        height: 40px !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        margin-left: -20px !important;
        margin-top: -20px !important;
        border-radius: 50%;
        opacity: .1;
        transform: scale(0);
        -webkit-transform: scale(0);
        transition: all .1s;
        -webkit-transition: all .1s;
      }

      .m-ui [m-button][m-type=micro]:active:after {
        content: '';
        transform: scale(1);
        -webkit-transform: scale(1);
      }


/* Controls --> button --> Circle */

.m-ui [m-button][m-type=circle].with-icon {
  border-radius: 50%;
  vertical-align: middle !important;
  text-align: center !important;
  display: inline-block;
  padding: 0 !important;
  padding-left: 0 !important;
}
.m-ui [m-button][m-type=circle].with-icon {
  font-size: 0;
}
.m-ui [m-button][m-type=circle].with-icon:before {
    display: inline-block;
    padding: 0;
    line-height: 1em;
    vertical-align: middle !important;
    top: 50%;
    position: absolute;
    font-size: 24px;
}

/* Controls --> button --> With loader */

.m-ui [m-button] [m-loader][m-type=circle],
.m-ui [m-button] m-loader[m-type=circle] {
  opacity: 0;
  top: 50%;
  position: absolute;
  left: 50%;
}
.m-ui [m-button].loading,
.m-ui [m-button].loading:hover {
  cursor: default;
    color: transparent !important;
}
.m-ui [m-button].loading [m-loader][m-type=circle],
.m-ui [m-button].loading m-loader[m-type=circle] {
    vertical-align: baseline;
    opacity: 1;
}

/* Controls -->  Button modifiers */

/* Controls -->  Button modifiers --> with icon */

/* Controls -->  Button modifiers --> Sizes for text buttons */

/* <-- All in custom */

/* Controls -->  Button modifiers --> Sizes for circle buttons */

  /* MiniButtons */
  .m-ui [m-button][m-type=circle].mini {
    padding: 0;
    font-size: 0;
  }

  /* LargeButtons */
  .m-ui [m-button][m-type=circle].large { 
    padding: 0 !important;
  }