@charset "UTF-8";
@import "~@alifd/next/variables.scss";
@import "~@aliretail/react-materials-components/es/MediaSelector/index.scss";
$mt: 8px;

.banner-setter-box {
  .b-tips {
    width: 100%;
    background: #eef0f3;
    padding: 12px;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 18px;
    display: block;
    .text {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #737373;
    }
  }
  .b-title {
    margin-top: $mt;
    .b-input {
      width: 100%;
      border: 1px solid #e5e5e5;
      border-radius: 2px;
      background-color: #fcfcfc;
    }
  }
  .b-upload {
    cursor: pointer;
    position: relative;
    margin-top: $mt;
    height: 92px;
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    background-size: 50px;
    background-color: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    &.default {
      background: url("https://img.alicdn.com/tfs/TB19MRkiSslXu8jSZFuXXXg7FXa-168-168.png")
        no-repeat center center;
      background-size: 50px;
      background-color: #fafafa;
    }
    &:hover {
      .b-close {
        display: flex;
      }
    }
    .b-close {
      display: none;
      position: absolute;
      right: 0;
      top: 0;
      width: 14px;
      height: 14px;
      z-index: 20;
      background-color: #ff6900;
      cursor: pointer;
      color: #fff;
      justify-content: center;
      align-items: center;
      &:hover {
        opacity: 0.8;
      }
    }
    img,
    video {
      max-width: 100%;
      max-height: 100%;
    }
  }
  .b-link {
    margin-top: $mt;
  }
}