.panel-btn-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 20px;

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

  > :first-child {
    margin-right: 0;
  }

  .panel-btn-dropdown-list {
    position: absolute;
    top: 100%;
    margin-top: 10px;
    left: 0;
    z-index: 1001;
    display: none;
    min-width: 200px;
    padding: 2px;
    background: $panel-bg;
    border: $panel-border-width solid $panel-inner-border;
    border-radius: $panel-border-radius;
    cursor: pointer;

    &.visible {
      display: block;
    }

    &.expand-top {
      top: auto;
      bottom: 100%;
      margin-bottom: 10px;
    }

    &.expand-left {
      right: 0;
      left: auto;
    }

    &::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: "";
    }

    > hr {
      height: 2px;
      margin: 5px 0;
    }

    > * {
      display: block;
      width: 100%;
      margin: 0;
      text-align: left;

      i {
        width: 16px;
        display: flex;
        justify-content: center;
      }
    }

    > * .panel-btn-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;

      > :first-child {
        margin-right: 10px;
      }

      > :not(:first-child) {
        flex: 1 1;
      }
    }
  }

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

@media (max-width: $desktop-breakpoint) {
  .panel-btn-dropdown {
    .panel-btn-dropdown-list {
      &.expand-left {
        right: 0;
      }
    }
  }
}
