.ml-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  &.type--text {
    &.is-underline {
      text-decoration: underline;
    }
    &.theme--gray {
      color: $ml-gray-color;
    }
    &.theme--blue {
      color: $ml-blue-color;
    }
    &.theme--green {
      color: $ml-green-color;
    }
    &.theme--pink {
      color: $ml-pink-color;
    }
    &.theme--red {
      color: $ml-red-color;
    }
    &.theme--orange {
      color: $ml-orange-color;
    }
    &.theme--purple {
      color: $ml-purple-color;
    }
  }
  &.type--button {
    &.theme--gray {
      background: $ml-gray-color;
    }
    &.theme--blue {
      color: #ffffff;
      background: $ml-blue-color;
      border-color: $ml-blue-color;
      &:hover {
        color: #ffffff;
        background: lighten($ml-blue-color, 5%);
        border-color: $ml-blue-color;
      }
      &.focus {
        border-color: $ml-blue-color;
      }
      &:active {
        color: #ffffff;
        background: darken($ml-blue-color, 5%);
        border-color: $ml-blue-color;
      }
    }
    &.theme--green {
      color: #ffffff;
      background: $ml-green-color;
      border-color: $ml-green-color;
      &:hover {
        color: #ffffff;
        background: lighten($ml-green-color, 5%);
        border-color: $ml-green-color;
      }
      &.focus {
        border-color: $ml-green-color;
      }
      &:active {
        color: #ffffff;
        background: darken($ml-green-color, 5%);
        border-color: $ml-green-color;
      }
    }
    &.theme--pink {
      color: #ffffff;
      background: $ml-pink-color;
      border-color: $ml-pink-color;
      &:hover {
        color: #ffffff;
        background: lighten($ml-pink-color, 5%);
        border-color: $ml-pink-color;
      }
      &.focus {
        border-color: $ml-pink-color;
      }
      &:active {
        color: #ffffff;
        background: darken($ml-pink-color, 5%);
        border-color: $ml-pink-color;
      }
    }
    &.theme--red {
      color: #ffffff;
      background: $ml-red-color;
      border-color: $ml-red-color;
      &:hover {
        color: #ffffff;
        background: lighten($ml-red-color, 5%);
        border-color: $ml-red-color;
      }
      &.focus {
        border-color: $ml-red-color;
      }
      &:active {
        color: #ffffff;
        background: darken($ml-red-color, 5%);
        border-color: $ml-red-color;
      }
    }
    &.theme--orange {
      color: #ffffff;
      background: $ml-orange-color;
      border-color: $ml-orange-color;
      &:hover {
        color: #ffffff;
        background: lighten($ml-orange-color, 5%);
        border-color: $ml-orange-color;
      }
      &.focus {
        border-color: $ml-orange-color;
      }
      &:active {
        color: #ffffff;
        background: darken($ml-orange-color, 5%);
        border-color: $ml-orange-color;
      }
    }
    &.theme--purple {
      color: #ffffff;
      background: $ml-purple-color;
      border-color: $ml-purple-color;
      &:hover {
        color: #ffffff;
        background: lighten($ml-purple-color, 5%);
        border-color: $ml-purple-color;
      }
      &.focus {
        border-color: $ml-purple-color;
      }
      &:active {
        color: #ffffff;
        background: darken($ml-purple-color, 5%);
        border-color: $ml-purple-color;
      }
    }
  }
}