.#{$dock_container} {
  position: fixed;
  --dock-item-width: #{size(144px)};
  --dock-item-height: #{size(96px)};
  &.at-left {
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 0;
    height: 100%;
    .panel-header,
    .panel-footer {
      border-radius: 0;
    }
    .panel-body {
      .scrollbar {
        height: calc(100vh - 2 * var(--panel-body-padding));
        .dock-items {
          flex-direction: column;
        }
      }
      .empty-text {
        margin-top: 45vh;
      }
    }
  }

  &.at-right {
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0;
    height: 100%;
    .panel-header,
    .panel-footer {
      border-radius: 0;
    }
    .panel-body {
      .scrollbar {
        height: calc(100vh - 2 * var(--panel-body-padding));
        .dock-items {
          flex-direction: column;
        }
      }
      .empty-text {
        margin-top: 45vh;
      }
    }
  }

  &.at-top {
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    width: 100% !important;
    .panel-header,
    .panel-footer {
      border-radius: 0;
    }
    .panel-body {
      .scrollbar {
        .dock-items {
          flex-direction: row;
        }
      }
    }
  }

  &.at-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    width: 100% !important;
    .panel-header,
    .panel-footer {
      border-radius: 0;
    }
    .panel-body {
      .scrollbar {
        .dock-items {
          flex-direction: row;
        }
      }
    }
  }

  .panel-body {
    .dock-items {
      display: flex;
    }
  }

  .dock-item {
    position: relative;
    margin: var(--lg);
    cursor: pointer;
    video,
    audio {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    &:hover {
      .item-content {
        box-shadow: var(--box-shadow-lg);
      }
      .item-close {
        visibility: visible;
        opacity: 1;
      }
      .item-title {
        color: var(--text-link);
      }
    }
    .item-content {
      width: var(--dock-item-width);
      height: var(--dock-item-height);
      box-shadow: var(--box-shadow-md);
      background-color: var(--bg-content);
      border: 1px solid var(--border-regular);
      overflow: hidden;
      .media {
        &.text {
          padding: var(--md);
        }
      }
    }
    .item-title {
      margin-top: var(--sm);
      text-align: center;
    }
    .item-close {
      position: absolute;
      visibility: hidden;
      opacity: 0;
      cursor: pointer;
      display: flex;
      top: 0;
      right: 0;
      transform: translate(50%, -50%);
      background-color: var(--bg-element);
      padding: var(--xxs);
      width: var(--lg);
      height: var(--lg);
      border-radius: var(--radius-round);
      box-shadow: var(--box-shadow-lg);
      transition: all .3s;
      .#{$icon} {
        width: 100%;
        height: 100%;
      }
    }
  }

  .empty-text {
    text-align: center;
  }
}