$irisColorVariants: (
  "primary": (
    "normal": #09acec,
    "active": #0788bb,
  ),
  "secondary": (
    "normal": #ea0029,
    "active": #a70320,
  ),
);

.iris-button {
  // alignment in case of having icon
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0.625em;
  font-size: 1rem;

  color: #54565a;
  background-color: transparent;
  border: 1px solid;
  border-color: currentColor;
  border-radius: 6px;
  transition: background-color 300ms;
  font-size: 1.4rem;

  .material-icons {
    margin-right: 0.25rem;
  }

  &:disabled {
    // color: #fff;
    // pointer-events: none;
    // background-color: #e2e2e2;
    color: #aaa;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.1);
  }
  &:hover {
    color: #fff;
    background: #54565a;
    // background: rgba($color: #54565a, $alpha: 0.9);
  }
  &:active,
  &.active {
    color: #fff;
    background: #3c3e44;
    // background: rgba($color: #54565a, $alpha: 1);
  }
  @each $name, $variatnMap in $irisColorVariants {
    &.iris-button--#{$name} {
      color: map-get($map: $variatnMap, $key: "normal");

      &:hover {
        color: #fff;
        background: map-get($map: $variatnMap, $key: "normal");
      }
      &:active,
      &.active {
        color: #fff;
        background: map-get($map: $variatnMap, $key: "active");
      }
      // default disabled style for all variants
      &:disabled {
        color: #606060;
        pointer-events: none;
        // background-color: #e2e2e2;
        // background-color: #e0e0e0;
        background-color: #e9e9e9;
        // background-color: rgba(0, 0, 0, 0.05);
        border: transparent;
      }
    }
  }

  &--small {
    font-size: 1rem;
  }
  &--medium {
    font-size: 1.2rem;
  }
  &--large {
    font-size: 1.5rem;
  }

  // icon button circle style
  &.circle {
    // remove margin from the icon
    .material-icons {
      margin: 0;
    }

    // reset padding
    padding: 0.25em;

    // make button rounded
    border-radius: 50%;
  }
}