<section class="main">
  <div class="container">
    <button class="btn btn__success">Success</button>
    <button class="btn btn__primary">Primary</button>
    <button class="btn btn__danger">Danger</button>
    <button class="btn btn__warning">Warning</button>
    <button class="btn btn__dark">Dark</button>
    <button class="btn btn__secondary">Secondary</button>
    <button class="btn btn__success" disabled>Disabled</button>
  </div>
  <div class="container">
    <button class="btn btn-outline__success">Success</button>
    <button class="btn btn-outline__primary">Primary</button>
    <button class="btn btn-outline__danger">Danger</button>
    <button class="btn btn-outline__warning">Warning</button>
    <button class="btn btn-outline__dark">Dark</button>
    <button class="btn btn-outline__secondary">Secondary</button>
    <button class="btn btn-outline__success" disabled>Disabled</button>
  </div>
</section>

body {
  margin: 20px;
  .main{
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
    .container{
      display: inherit;
      height: min-content;
      gap: 30px;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      padding: 20px;
      width: 100%;
    }  
  }
}


//Variables
$white: #FCFAF7;
$lightgrey: #D5D5D5;
$mediumgrey: #B1B1B1;
$darkgrey: #505155;
$primary: #34CED1;
$success: #7DCC3D;
$danger: #E64545;
$warning: #ffc107;
$shadow: 1px 1px 6px 1px rgba(15, 15, 35, .1);
$shadow-up: 3px 3px 8px -7px rgba(15, 15, 35, .3);
$default-radius: 8px;

//Btn Map
$buttons: 
"primary" $primary $white,
"danger" $danger $white,
"success" $success $white,
"warning" $warning $darkgrey,
"dark" $darkgrey $white,
"secondary" $mediumgrey $white;

// Fill Buttons
.btn {
  align-self: flex-end;
  border: none;
  border-radius: $default-radius;
  cursor: pointer;
  font-size: 1rem;
  height: 44px;
  margin-top: 28px;
  min-width: 120px;
  padding: 0 10px;
  width: auto;
  @each $name, $bg, $color in $buttons {
    &__#{$name} {
      background-color: $bg;
      box-shadow: $shadow;
      color: $color;
      transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      &:hover {
        background-color: darken($bg, 5%);
        box-shadow: $shadow-up;
      }
      &:active {
        background-color: darken($bg, 10%);
      }
      &:focus {
        box-shadow: 0 0 0 3px darken($bg, 10%);
        outline: none;
      }
      &:disabled {
        border: none;
        cursor: default;
        opacity: .55;
        pointer-events: none;
        user-select: none;
      }
    }
    &-outline__#{$name} {
      background-color: transparent;
      border: 1px solid transparent;
      border-color: $bg;
      border-image: none;
      color: $bg;
      font-weight: 400;
      transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      vertical-align: middle;
      &:hover {
        background-color: darken($bg, 5%);
        box-shadow: $shadow-up;
        color: $color;
      }
      &:active {
        background-color: darken($bg, 10%);
      }
      &:focus {
        box-shadow: 0 0 0 3px darken($bg, 10%);
        border: none;
        outline: 0;
      }
      &:disabled {
        border-color: $lightgrey;
        color: $lightgrey;
        cursor: default;
        pointer-events: none;
        user-select: none;
      }
    }
  }
}