.panel-btn-group {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 50px;
  margin-right: 10px;
  margin-bottom: 20px;
  padding: 2px;
  vertical-align: middle;
  background: $panel-bg;
  border: $panel-border-width solid $panel-inner-border;
  border-radius: $panel-border-radius;
  opacity: 1;

  &::before {
    position: absolute;
    top: -$panel-border-width;
    right: 14px;
    left: 14px;
    height: $panel-border-width;
    background-color: #444;
    content: "";
  }

  &::after {
    position: absolute;
    right: 14px;
    bottom: -$panel-border-width;
    left: 14px;
    height: $panel-border-width;
    background-color: #444;
    content: "";
  }

  &:last-child {
    margin-right: 0;
  }

  > :first-child {
    flex-grow: 1;
  }

  > span {
    padding: 5px 10px;
  }

  > * {
    margin-right: 0 !important;
    border-right: 1px solid #444 !important;
    border-radius: 0 !important;
  }

  > .panel-btn-dropdown {
    height: 34px;
  }

  > .panel-btn,
  > .panel-btn-dropdown > .panel-btn {
    padding: 0;

    .panel-btn-inner {
      border-radius: $border-radius-base - 1px;
    }

    &:first-child {
      .panel-btn-inner {
        border-top-left-radius: $panel-content-border-radius;
        border-bottom-left-radius: $panel-content-border-radius;
      }
    }

    &:last-child {
      .panel-btn-inner {
        border-top-right-radius: $panel-content-border-radius;
        border-bottom-right-radius: $panel-content-border-radius;
      }
    }
  }

  > :last-child {
    border-right: none !important;
  }

  &.panel-btn-group-inline {
    margin-bottom: 0;
  }
}
