// Color variables
$orange: #ff9800;
$orange-hover: #ffb74d;

$blue: #2196f3;
$blue-hover: #42a5f5;

$red: #f44336;
$red-hover: #ef5350;

$green: #4caf50;
$green-hover: #66bb6a;

$purple: #9c27b0;
$purple-hover: #ab47bc;

$teal: #009688;
$teal-hover: #26a69a;

$indigo: #3f51b5;
$indigo-hover: #5c6bc0;

$pink: #e91e63;
$pink-hover: #ec407a;

$cyan: #00bcd4;
$cyan-hover: #26c6da;

$amber: #ffc107;
$amber-hover: #ffd54f;

$brown: #795548;
$brown-hover: #8d6e63;

$grey: #9e9e9e;
$grey-hover: #bdbdbd;

.action-btn {
  &.orange-btn {
    background-color: $orange;

    & &:hover {
      background-color: $orange-hover;
    }
  }

  &.blue-btn {
    background-color: $blue;

    &:hover {
      background-color: $blue-hover;
    }
  }

  &.red-btn {
    background-color: $red;

    &:hover {
      background-color: $red-hover;
    }
  }

  &.green-btn {
    background-color: $green;

    &:hover {
      background-color: $green-hover;
    }
  }

  &.purple-btn {
    background-color: $purple;

    &:hover {
      background-color: $purple-hover;
    }
  }

  &.teal-btn {
    background-color: $teal;

    &:hover {
      background-color: $teal-hover;
    }
  }

  &.indigo-btn {
    background-color: $indigo;

    &:hover {
      background-color: $indigo-hover;
    }
  }

  &.pink-btn {
    background-color: $pink;

    &:hover {
      background-color: $pink-hover;
    }
  }

  &.cyan-btn {
    background-color: $cyan;

    &:hover {
      background-color: $cyan-hover;
    }
  }

  &.amber-btn {
    background-color: $amber;

    &:hover {
      background-color: $amber-hover;
    }
  }

  &.brown-btn {
    background-color: $brown;

    &:hover {
      background-color: $brown-hover;
    }
  }

  &.grey-btn {
    background-color: $grey;

    &:hover {
      background-color: $grey-hover;
    }
  }
}
