.p-sidebar {
  background-color: var(--side-panel-background-color);
  overflow-y: auto;
  padding: 8px 20px;
  z-index: 15;

  p-header {
    font-size: 1.6em;
    font-weight: 600;
    padding: 10px;
    border-bottom: 1px solid var(--side-panel-border-color);
    height: 45px;

    i {
      font-size: 1em;
      margin-right: 5px;
    }
  }

  .p-sidebar-footer:not(:empty) {
    padding: 15px 10px;
    text-align: right;
    border-top: 1px solid var(--side-panel-border-color);
  }

  .p-sidebar-header:not(:empty) {
    flex: 0 1 auto;
    font-size: large;
    color: var(--side-panel-text-color);
    padding: 7px;
    border-bottom: 1px solid var(--side-panel-border-color);
    position: relative;
    display: flex;
    align-items: center;

    button:only-child {
      margin-left: auto;
    }

    h1 {
      display: inline-block;
      color: var(--side-panel-title-color);
      margin: 0 auto 0 0;
      font-size: 18px;
      font-weight: 600;
    }
  }

  .p-divider.p-divider-vertical {
    margin: 0 .5rem;
    padding: .25rem 0;
  }

  .p-sidebar-content {
    height: 100%;
  }

  &.p-sidebar-left {
    padding: 8px 20px;
  }

  &.p-sidebar-right {
    background: $side-panel-background-color;
    max-width: 450px;
    width: 95vw;
  }

  .p-sidebar-close {
    z-index: 100;
    padding: 5px;
    border-radius: 50%;
    font-size: 18px;
    width: 40px;
    height: 40px;
    transition: background-color ease-in-out $transitionDuration;
    margin: 0;

    .pi-times:before {
      font-family: devolutions-icons, serif;
      content: "\e93e";
    }

    &:hover:not(.p-disabled):not([disabled]) {
      background-color: $action-btn-hover-bg-color;
    }

    &:active:not(.p-disabled):not([disabled]) {
      background-color: $action-btn-pressed-bg-color;
    }
  }
}

.p-sidebar-left.p-sidebar-lg,
.p-sidebar-left.p-sidebar-md,
.p-sidebar-right.p-sidebar-lg,
.p-sidebar-right.p-sidebar-md {
  @media screen and (max-width: 64em) {
    width: 30rem !important;
  }
}
