@import "../../../style/mixin";

@include export-module('sc-key-pad-theme') {
  .co-key-pad {
    .key-pad-wrapper {
      background: $sc-key-pad-background-color;
    }
    .key-pad-model-wrapper {
      background: $sc-key-pad-button-background-color;
    }
    .key-pad-model {
      color: $sc-key-pad-model-font-color-positive;
      &.negative {
        color: $sc-key-pad-model-font-color-negative;
      }
    }
    .key-pad-button {
      background: $sc-key-pad-button-background-color;
      color: $sc-key-pad-button-font-color;
      box-shadow: 0px 1px 0px darken($sc-key-pad-button-background-color, 30%);
      .co-icon {
        svg { // for fontawesome icons
          fill: $sc-key-pad-button-font-color;
        }
        & [fill] { // for own icons
          fill: $sc-key-pad-button-font-color;
        }
      }
      &:active {
        box-shadow: none;
        transform: translateY(1px);
      }
    }
  }
}