@use '../../partials/dir';

.sticker-board {
  --sticker-board-height: 390px;
  --sticker-board-width: 286px;
  display: flex;
  height: var(--sticker-board-height);
  display: flex;

  & > .scrollbar {
    width: initial;    
    height: var(--sticker-board-height);
  }

  &__sidebar {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 4px 6px;
    @include dir.side(border, none, 1px solid var(--bg-surface-border));
  }

  &__container {
    flex-grow: 1;
    min-width: 0;
    width: var(--sticker-board-width);
    display: flex;
  }

  &__content {
    min-height: 100%;
  }

  &__pack {
    margin-bottom: var(--sp-normal);
    position: relative;

    &-header {
      position: sticky;
      top: 0;
      z-index: 99;
      background-color: var(--bg-surface);
  
      @include dir.side(margin, var(--sp-extra-tight), 0);
      padding: var(--sp-extra-tight) var(--sp-ultra-tight);
      text-transform: uppercase;
      box-shadow: 0 -4px 0 0 var(--bg-surface);
      border-bottom: 1px solid var(--bg-surface-border);
    }
    &-items {
      margin: var(--sp-tight);
      @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-normal) var(--sp-tight);

      img {
        width: 76px;  
        height: 76px;
        object-fit: contain;
        cursor: pointer;
      }
    }
  }

  &__empty {
    width: 100%;
    height: var(--sticker-board-height);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}