@import 'press-ui/common/style/smoba/layout.scss';
@import 'press-ui/common/style/smoba/mixin.scss';


.press-brand {
  position: relative;
  display: flex;
  width: vw(292);
  height: vw(72);
  margin-bottom: vw(8);
  mask-image: linear-gradient(to right, #000 80%, transparent 98%);

  &--task {
    .press-brand__img {
      margin: vw(4) auto;
    }

    .press-brand__name {
      padding: 0 vw(10);
      line-height: vw(10);
      white-space: unset;

      @include more-lines-ellipsis(vw(20), $line: 2);
    }
  }

  &__title {
    width: vw(20);
    height: vw(72);
    margin-right: vw(4);
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/brand-title.png) no-repeat center center;
    background-size: contain;

    &--task {
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/task-title.png);
    }
  }

  &__list {
    display: flex;
    align-items: flex-end;
    flex: 1;
    overflow-y: scroll;
  }

  &__item {
    width: vw(70);
    height: 100%;
    margin-right: vw(4);
    flex-shrink: 0;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/brand-bg.png) no-repeat left bottom;
    background-size: vw(70) auto;

    &:last-child {
      width: vw(90);
      padding-right: vw(20);
    }
  }

  &__swiper {
    position: absolute;
    top: 0;
    left: vw(24);
    width: vw(296);
    height: vw(72);
  }

  &__item__box {
    width: vw(70);
    height: vw(72.5);
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/task-bg.png) no-repeat;
    background-size: vw(70) auto;
    overflow: hidden;
  }

  &__img {
    position: relative;
    display: block;
    width: vw(32);
    height: vw(32);
    margin: vw(7.5) auto vw(5);
    background-color: $color-white;
    border: 1px solid #6d8ac3;
  }

  &__name {
    font-size: vw(9);
    color: $color-white;
    text-align: center;
    padding: 0 vw(16);

    @include single-line-ellipsis();
  }
}