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

@include export-module('sc-key-pad-layout') {
  .co-key-pad {
    font-family: $sc-key-pad-font-family;
    font-size: $sc-key-pad-font-size;
    display: flex;
    width: 100%;
    aspect-ratio: 1/1;
    .key-pad-wrapper {
      display: flex;
      width: 100%;
      flex-direction: column;
      row-gap: $sc-key-pad-button-gap;
      padding: $sc-key-pad-button-gap;
      border-radius: $sc-key-pad-border-radius;
    }
    .key-pad-model-wrapper {
      position: relative;
      font-family: $sc-font-family-digital;
      //font-size: $sc-key-pad-model-font-size;
      display: flex;
      flex-basis: 10%;
      justify-content: flex-end;
      padding: $sc-key-pad-model-padding;
      box-shadow: inset 0px 0px 3px 1px darken($sc-key-pad-button-background-color, 30%);
    }
    .co-scalable-text {
      display: flex;
      width: 100%;
      justify-content: flex-end;
    }
    .key-pad-model {
      user-select: none;
      pointer-events: none;
      display: block;
      position: absolute;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
      //right: 10%;
      //transform: translate(50%, -50%);
      //foreignObject {
      //  overflow: visible;
      //}
      svg {
        position: relative;
        width: 100%;
      }
      .text {
        font-size: $sc-key-pad-model-font-size;
        font-weight: bold;
        /* display: flex; */
        /* align-items: center; */
        /* justify-content: flex-end; */
        /* align-self: auto; */
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }
    .key-pad-button-flex-wrapper {
      display: flex;
      flex-basis: 100%;
    }
    .key-pad-button-wrapper {
      display: grid;
      height: 100%;
      width: 100%;
      grid-template-columns: $sc-key-pad-button-size $sc-key-pad-button-size $sc-key-pad-button-size $sc-key-pad-button-size;
      grid-template-rows: $sc-key-pad-button-size $sc-key-pad-button-size $sc-key-pad-button-size $sc-key-pad-button-size;
      row-gap: $sc-key-pad-button-gap;
      column-gap: $sc-key-pad-button-gap;
    }
    .key-pad-button {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      border-radius: $sc-key-pad-button-border-radius;
      .co-icon {
        width: 45%;
        height: 45%;
      }
      .key-pad-button-text {
        position: absolute;
        pointer-events: none;
      }
      .text {
        display: flex;
        //width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        font-size: $sc-key-pad-button-font-size;
      }
    }
    .button-7 {
      grid-column: 1 / 1;
      grid-row: 1 / 1;
    }
    .button-8 {
      grid-column: 2 / 2;
      grid-row: 1 / 1;
    }
    .button-9 {
      grid-column: 3 / 3;
      grid-row: 1 / 1;
    }
    .button-bs {
      grid-column: 4 / 4;
      grid-row: 1 / 1;
    }
    .button-4 {
      grid-column: 1 / 1;
      grid-row: 2 / 2;
    }
    .button-5 {
      grid-column: 2 / 2;
      grid-row: 2 / 2;
    }
    .button-6 {
      grid-column: 3 / 3;
      grid-row: 2 / 2;
    }
    .button-minus {
      grid-column: 4 / 4;
      grid-row: 2 / 2;
    }
    .button-1 {
      grid-column: 1 / 1;
      grid-row: 3 / 3;
    }
    .button-2 {
      grid-column: 2 / 2;
      grid-row: 3 / 3;
    }
    .button-3 {
      grid-column: 3 / 3;
      grid-row: 3 / 3;
    }
    .button-0 {
      grid-column: 1 / 3;
      grid-row: 4 / 4;
    }
    .button-dot {
      grid-column: 3 / 3;
      grid-row: 4 / 4;
    }
    .button-enter {
      grid-column: 4 / 4;
      grid-row: 3 / 5;
      align-items: flex-end;
      padding-bottom: 10px;
    }
  }
}