@use "src/styles/variables" as *;
@use "src/components/Main/Button/style" as *;

.vm-step-control {
  display: inline-flex;

  button {
    text-transform: none;
  }

  &-popper {
    display: grid;
    gap: $padding-small;
    max-width: 300px;
    overflow: auto;
    padding: $padding-global;
    font-size: $font-size;

    &_mobile {
      padding: 0 $padding-global $padding-small;
      max-width: 100%;
      max-height: calc(($vh * 100) - 70px);
    }

    &_mobile &-info {
      font-size: $font-size;
    }

    &-info {
      font-size: $font-size-small;
      line-height: 1.8;

      code {
        padding: .2em .4em;
        margin: 0;
        font-size: 85%;
        white-space: break-spaces;
        background-color: $color-hover-black;
        border-radius: 6px;
      }
    }
  }
}
