.button-group {
  display: flex;
  flex-flow: row nowrap;
  gap: 1px;

  line-height: 34px;

  border-radius: 5px;

  button {
    cursor: pointer;

    font-size: var(--default-font-size);
    line-height: 34px;

    opacity: 1;
    background: none;
    border: none;

    transition: opacity 0.2s ease;

    &:hover {
      opacity: 0.8;
    }

    &.button {
      user-select: none;
      padding: 0 30px;

      &:disabled {
        pointer-events: none;
        cursor: default;
        opacity: 0.5;
      }

      &-first {
        border-radius: 5px 0 0 5px;
      }

      &-last {
        border-radius: 0 5px 5px 0;
      }

      &-icon {
        padding: 0 5px;

        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      &-success {
        &.green {
          color: #fff;
          background-color: var(--default-color-green, #61ce70);
          stroke: #fff;
        }

        &.grey {
          color: var(--color-gray-444);
          white-space: nowrap;
          background-color: var(--color-gray-eee);
          stroke: none;
        }
      }
    }
  }

  &.small {
    button {
      line-height: 20px;

      &.button {
        padding: 0 5px;

        &-success:disabled {
          color: var(--color-gray-444);
        }
      }
    }
  }
}