// 商品规格选项弹出框
.goods-spec-popup {
  --primary-color: #ff7437;
  --tag-color: var(--color-gray-0);
  --tag-bg-color: #f5f5f5;
  --tag-bg-color--selected: var(--primary-color);
  --tag-bg-color--disabled: #c8c9cc;
  padding: 25rpx;

  .goods-spec-info {
    display: flex;
    flex-direction: row;
    align-items: center;

    .goods-spec-img {
      display: block;
    }

    .goods-spec-base {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      margin-left: 32rpx;

      .goods-spec-price {
        display: flex;
        flex-direction: row;
        align-items: baseline;

        .goods-price {
          font-size: 40rpx;
          line-height: 56rpx;
          color: var(--primary-color);
        }

        .discount-price {
          margin-left: 10rpx;
          font-size: 28rpx;
          line-height: 40rpx;
          color: var(--color-gray-2);
          text-decoration: line-through;
        }
      }

      .goods-discount-text {
        width: 200rpx;
        height: 50rpx;
        margin-top: 10rpx;
        font-size: 22rpx;
        line-height: 50rpx;
        color: var(--primary-color);
        text-align: center;
        overflow-wrap: break-word;
        background-color: #fff3f1;
        border-radius: 25rpx;
      }

      .goods-spec-selected {
        display: flex;
        flex-direction: row;
        width: 100%;
        margin-top: 24rpx;

        .selected-prefix {
          display: block;
          font-size: 30rpx;
          line-height: 42rpx;
          color: rgba(102, 102, 102, 1);
          text-align: left;
          overflow-wrap: break-word;
        }

        .selected-name {
          display: block;
          margin-left: 16rpx;
          font-size: 30rpx;
          font-weight: 600;
          line-height: 42rpx;
          color: rgba(51, 51, 51, 1);
          text-align: left;
          overflow-wrap: break-word;
        }
      }
    }
  }

  .goods-spec-select {
    .goods-spec-options__list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;

      .goods-spec-options__item {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 10rpx 20rpx;
        margin: 30rpx 10rpx 0 0;
        font-size: 30rpx;
        line-height: 30rpx;
        color: var(--tag-color);
        background-color: var(--tag-bg-color);
        border: 1rpx solid var(--tag-bg-color);
        border-radius: 40rpx;

        &_selected {
          color: var(--tag-bg-color--selected);
          background-color: transparent;
          border: 1rpx solid var(--tag-bg-color--selected);
        }

        &_disabled {
          color: var(--tag-bg-color--disabled);
          border-color: transparent;
          // border: 1rpx solid var(--tag-bg-color--disabled);
        }
      }
    }
  }

  .goods-spec-row {
    margin: 30rpx 0;

    .goods-spec-row-title {
      display: block;
      font-size: 28rpx;
      line-height: 28rpx;
      color: rgba(102, 102, 102, 1);
      text-align: left;
      overflow-wrap: break-word;
    }
  }

  .goods-spec-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .goods-spec-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .goods-spec-total-value {
      display: block;
      font-size: 28rpx;
      line-height: 28rpx;
      color: rgba(255, 116, 55, 1);
      text-align: left;
      overflow-wrap: break-word;
    }
  }
}