@import 'src/global/styles/var';
.glue-key {
  display: flex;
  align-items: center;
  justify-content: center;
  height: @number-keyboard-key-height;
  font-size: @number-keyboard-key-font-size;
  line-height: 1.5;
  background-color: @white;
  border-radius: @border-radius-lg;
  cursor: pointer;

  &--large {
    // height: 100% can't fill flex parent on legacy safari
    // see: https://stackoverflow.com/questions/33636796
    position: absolute;
    top: 0;
    right: 6px;
    bottom: 6px;
    left: 0;
    height: auto;
  }

  &--blue,
  &--delete {
    font-size: @number-keyboard-delete-font-size;
  }

  &--active {
    background-color: @number-keyboard-key-active-color;
  }

  &--blue {
    color: @number-keyboard-button-text-color;
    background-color: @number-keyboard-button-background-color;

    &.glue-key--active {
      background-color: darken(@number-keyboard-button-background-color, 10%);
    }
  }

  &__wrapper {
    position: relative;
    flex: 1;
    flex-basis: 33%;
    box-sizing: border-box;
    padding: 0 6px 6px 0;

    &--wider {
      flex-basis: 66%;
    }
  }

  &__delete-icon {
    width: 32px;
    height: 22px;
  }

  &__collapse-icon {
    width: 30px;
    height: 24px;
  }

  &__loading-icon {
    color: @number-keyboard-button-text-color;
  }
}
