@use "../../../styles/mixins";

.BotKeyboardMenu {
  .bubble {
    width: 100% !important;
    max-width: 27rem;
    border-radius: var(--border-radius-default-small);
  }

  .content {
    overflow-y: scroll;
    display: flex;
    flex-direction: column;

    max-height: 75vh;
    padding: 0.1875rem 0.625rem;

    @include mixins.adapt-padding-to-scrollbar(0.625rem);

    .row {
      display: flex;
      flex-direction: row;
    }

    .row + .row {
      margin-top: 0.375rem;
    }

    .Button {
      flex: 1;

      width: auto;
      height: auto;
      min-height: 3.0625rem;
      border: 2px solid var(--color-primary);
      border-radius: var(--border-radius-messages-small);

      font-weight: var(--font-weight-medium);
      color: var(--color-primary);
      text-transform: none;

      background: var(--color-background);

      &:hover {
        border-color: var(--color-primary-shade);
        color: #fff;
        background: var(--color-primary-shade);
      }
    }

    .Button + .Button {
      margin-left: 0.375rem;
    }
  }
}
