@function frontColor($color) {
  @return color-contrast($color);
}

@each $colorType,
$color in $nationColors {
  .sam-color-#{$colorType} {
    .sam-nation-own-bgcolor {
      background-color: $color;
      color: frontColor($color);
    }

    .btn-sammo-nation {
      @include button-variant($color, $color);

      &:hover,
      &:active,
      &:focus {
        background-color: $color;
      }

      &,
      &:not(.disabled):hover,
      &:not(.disabled):active,
      &:focus {
        border-color: shade-color($color, 10%);
      }
    }
  }

  .sam-nation-bg-#{$colorType} {
    background-color: $color;
    color: frontColor($color);
  }

  .btn-sammo-nation-#{$colorType} {
    @include button-variant($color, $color);

    &:hover,
    &:active,
    &:focus {
      background-color: $color;
    }

    &,
    &:not(.disabled):hover,
    &:not(.disabled):active,
    &:focus {
      border-color: shade-color($color, 10%);
    }
  }
}

@each $colorType,
$color in $sammoColors {
  .btn-sammo-#{$colorType} {
    @include button-variant($color, $color);

    &:hover,
    &:active,
    &:focus {
      background-color: $color;
    }

    &,
    &:not(.disabled):hover,
    &:not(.disabled):active,
    &:focus {
      border-color: shade-color($color, 10%);
    }
  }
}


.buttonPlate {
  .toolbarButton {
      @extend .btn;
      @extend .btn-sammo-base2;
      width: 100%;
      font-weight: bold;
      font-size: 14px;
  }

  .toolbarButton2 {
      @extend .btn;
      @extend .btn-sammo-base2;
      color: magenta;
      width: 100%;
      font-weight: bold;
      font-size: 14px;

      &:hover,
      &:focus,
      &:active {
          color: magenta;
      }
  }

  .commandButton {
      width: 100%;
      font-weight: bold;
      font-size: 14px;
      display: block;
  }
}