$tablet-l-width: 1024px;
$tablet-s-width: 768px;

::ng-deep .sticker-selector {
  height: 210px;
  border-top: 1px solid #cccccc;
  .mat-tab-header {
    .mat-tab-label {
      padding: 0 10px;
    }
  }
  .mat-tab-body-wrapper {
    height: 150px;
    overflow: auto;
  }
  @media screen and (max-width: #{$tablet-s-width}) {
    height: 180px;
    .mat-tab-body-wrapper {
      height: 130px;
    }
  }
}
.sticker-item-box {
  flex-wrap: wrap;
  padding: 10px 20px 0;
  overflow: auto;

  .sticker-item {
    width: 60px;
    margin-bottom: 10px;
    display: inline-flex;
    cursor: pointer;
  }
}

@media screen and (max-width: #{$tablet-s-width}) {
  .sticker-item-box {
    .sticker-item {
      width: 50px;
    }
  }
}

.selected-sticker {
  position: relative;
  padding: 10px 20px;
  text-align: right;
  background-color: rgba(45, 58, 74, 0.8);
  img {
    margin-right: 40px;
  }
  .btn-close {
    position: absolute;
    top: 2px;
    right: 10px;
    width: 40px;
    height: 40px;
    color: #ffffff;
  }
}