.rf-btn {
  color: #fff;
  border: none;
  background: var(--main_color);
  padding: 5px;
  border-color: #fff;
  margin: 5px 0;
  cursor: pointer;
  user-select: none;
  user-select: none;
  text-align: center;

  &:hover {
     background: #fff;
  }

  &.rf-btn-border {
    border-width: 1px;
    border-style: solid;
  }

  &.rf-btn-green {
    color: #fff;
    background: var(--green);
    border-color: #fff;
  }

  &.rf-btn-red {
    color: #fff;
    background: var(--darkred);
    border-color: #fff;
  }

  &.rf-btn-grey {
     background: var(--lightgrey);
  }

  &.rf-btn-disabled {
    color: white;
    background: var(--lightgrey);
    border-color: var(--grey);
    cursor: not-allowed;
  }

  &.rf-btn-transparent {
    background: none;
  }

  &.rf-btn-icon {
    text-align: left;

    & > * {
      margin: 3px;
      float: right;
    }
  }
}

.rf-btn.rf-btn-inverted{
   background: none;
}

.rf-btn.rf-btn-inverted,
.rf-btn:hover {
  @extend .rf-btn;
  color: var(--main_color);
  border-color: var(--main_color);
  margin: 5px 0;

  &.rf-btn-green {
    color: var(--darkgreen);
    background: #fff;
    border-color: var(--darkgreen);
  }

  &.rf-btn-red {
    color: var(--darkred);
    background: #fff;
    border-color: var(--darkred);
  }

  &.rf-btn-grey {
     color: var(--grey);
     background: #fff;
  }

  &.rf-btn-disabled {
    color: white;
    background: var(--lightgrey);
    border-color: var(--grey);
  }

  &.rf-btn-background {
     background: #fff;
  }
}

.rf-btn.rf-btn-inverted:hover{
   opacity: 0.65;
}

.rf-btn-round {
   border-radius: 20px;
}