@charset "utf-8";

.x-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 100%;
  height: 90px;
  font-size: 30px;
  border-radius: 5px;
  &:active {
    opacity: 1;
    color: #fff;
  }
  .x-button__loading {
    width: 25px;
    height: 25px;
    .x-loading__spin_path {
      stroke: #fff;
      stroke-width: 5px; /*no*/
    }
  }
  &__text {
    display: block;
    padding: 0 10px;
    white-space: nowrap;
  }
  &--primary {
    background: #00bb55;
    color: #fff;
    &:active {
      background: #00bb55 - 10;
    }
  }
  &--danger {
    background: #ff5f4a;
    color: #fff;
    &:active {
      background: #ff5f4a - 10;
    }
  }
  &--default {
    border: 2px solid #00bb55; /*no*/
    background: #fff;
    color: #00bb55;
    &:active {
      opacity: 0.7;
      color: #00bb55;
    }
    .x-button__loading {
      .x-loading__spin_path {
        stroke: #00bb55;
      }
    }
  }
  &--mini {
    width: auto;
    display: flex;
    height: 70px;
    font-size: 28px;
    padding: 0 30px;
    .x-button__loading {
      .x-loading__spin {
        width: 20px;
        height: 20px;
      }
    }
  }
  &--disabled {
    opacity: 0.6;
    pointer-events: none;
  }
}