$panel-border-width: 2px;
$panel-border-radius: 10px;
$panel-content-border-radius: 6px;

.panel-btn {
  position: relative;
  display: inline-block;
  min-width: 50px;
  margin-right: 10px;
  margin-bottom: 20px;
  padding: 2px;
  background: $panel-bg;
  border: $panel-border-width solid $panel-inner-border;
  border-radius: $panel-border-radius;
  cursor: pointer;
  opacity: 1;
  transition: all $transition-base-speed ease;

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

  .panel-btn-inner {
    padding: 6px 14px;
    color: $text-color;
    font-size: 110%;
    white-space: nowrap;
    text-align: center;
    text-overflow: ellipsis;
    border-radius: $panel-content-border-radius;
    transition: all $transition-base-speed ease;
  }

  &.panel-btn-transparent {
    background: transparent;
  }

  &.panel-btn-link {
    background: transparent;
    border: none;

    &::before {
      display: none;
    }

    &::after {
      display: none;
    }

    &:hover {
      background: transparent;
      border: none;

      .panel-btn-inner {
        color: white !important;
        background: transparent !important;
      }
    }
  }

  &.panel-btn-small {
    min-width: 40px;

    .panel-btn-inner {
      padding: 5px 10px;
      font-size: 100%;
    }
  }

  &.panel-btn-large {
    min-width: 62px;

    .panel-btn-inner {
      padding: 8px 16px;
      font-size: 130%;
    }
  }

  &.panel-btn-submit {
    min-width: 140px;
  }

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

  &.panel-btn-text-inline {
    min-height: auto;
    margin: 0;
    padding: 0;

    .panel-btn-inner {
      margin: 0;
      padding: 0;
      color: $text-color !important;
      background-color: transparent !important;
    }
  }

  &.panel-btn-block {
    width: 100%;
  }

  &[disabled] {
    opacity: 0.5;
  }

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

  &:hover:not([disabled]),
  &.active {
    .panel-btn-inner {
      color: invert($text-color);
      background-color: $panel-inner-border;
    }
  }

  &:active:not([disabled]) {
    animation-name: flash;
    animation-duration: 0.5s;
  }

  &.panel-btn-danger {
    .panel-btn-inner {
      color: $danger;
    }
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0.5;
  }
}

@media (max-width: $desktop-breakpoint) {
  .panel-btn {
    &.panel-btn-block,
    &.panel-btn-mobile-block,
    &:last-child:first-child {
      width: 100%;
    }

    &.panel-btn-mobile-block {
      clear: both;
      margin-right: 0;
    }

    .panel-btn-inner {
      white-space: normal;
    }
  }
}
