@mixin generate_buttons {
  @for $i from 1 through length($all_colors) {
    button,
    a.is-button {
      border: none;
      padding: 1rem 2rem;
      font-size: 1rem;
      
      &.has-rounded-corners { border-radius: 10rem; }
  
      &.is-#{nth($all_colors, $i)} {
        background: variable(#{nth($all_colors, $i)});
        color: variable("white");
    
        &.is-outline {
          background: transparent;
          border: 2px solid variable(#{nth($all_colors, $i)});
          color: variable(#{nth($all_colors, $i)});
        }
  
        &.is-link {
          background: none;
          color: variable(#{nth($all_colors, $i)});
          text-decoration: underline;
        }
      }
      
      &.is-small {
        padding: .5rem 2rem;
      }
      
      &.is-large {
        padding: 1.5rem 2rem;
        font-size: 1.25rem;
      }
    }
  }
}

@include generate_buttons;