@include export-module('cc-signature-button-layout') {
  .co-signature-button {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    column-gap: 5px;
    .signature-button-wrapper {
      height: $sc-co-signature-button-height;
      width: $sc-co-signature-button-width;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: $sc-co-signature-button-background-color;
      border-radius: $sc-co-signature-button-border-radius;
      cursor: pointer;
      border: 1px solid $sc-co-signature-button-selected-background-color;
      .co-icon {
        width: $sc-co-signature-button-icon-height; //wrong icon with whitespace
        height: $sc-co-signature-button-icon-width; //wrong icon with whitespace
        svg {
          fill: $sc-co-signature-button-selected-background-color;
        }
      }
      &.selected {
        background-color: $sc-co-signature-button-selected-background-color;
        .co-icon {
          svg { // for fontawesome icons
            fill: $sc-co-signature-button-icon-selected-color;
          }
          & [fill] { // for own icons
            fill: $sc-co-signature-button-icon-selected-color;
          }
        }
      }
    }
  }
}
