//
//  Component:
//
//  P O S T B O X   B A C K G R O U N D S
//
//  Extends postbox component and gives ability to set custom background
//  on posts.
//

.ps-postbox__view[data-tab-id="post_backgrounds"] {
  position: relative;
}

.ps-postbox__backgrounds {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--PADD);
  background: transparent;
  background: -webkit-linear-gradient(bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);
  display: inline-block;
  text-align: center;
	white-space: nowrap;
	overflow-x: scroll;
	padding-top: 40px;

  @include mq($from: desktop) {
    &::-webkit-scrollbar {
      background-color: var(--bg);
      height: 15px;
    }
  
    &::-webkit-scrollbar-track {
      background-color: var(--bg);
    }
  
    &::-webkit-scrollbar-thumb {
      background-color: #babac0;
      border-radius: 16px;
      border: 2px solid var(--bg);
    }
  }
}

.ps-postbox__backgrounds-item {
  width: 50px;
  height: 50px;
  display: inline-block;

  @if $rtl {
    margin-left: var(--PADD--SM);
  } @else {
    margin-right: var(--PADD--SM);
  }

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: var(--BORDER-RADIUS--MD);
  box-shadow: inset 0 0 0 2px rgba(255,255,255, .05);
  transition: all .2s ease;
  cursor: pointer;

  &:hover {
    box-shadow: inset 0 0 0 2px rgba(255,255,255, .1), 0 0 15px rgba(0,0,0, .35);
  }

  &.active {
    box-shadow: inset 0 0 0 2px #fff, 0 0 15px rgba(0,0,0, .35);
  }

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

  &:after {
    bottom: 110%;
    line-height: 1.6;
  }
}