$cssPrefix: trader-order-store;

.#{$cssPrefix}-container {
  height: 100%;
  width: 100%;
  background-color: var(--color-white, #fff);
  display: flex;
  align-items: center;

  .title {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .left {
      font-size: var(--p-body-2-font-size, 32rpx);
      color: var(--color-text1-4, #111);
    }

    .right {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;

      .text {
        font-size: var(--p-body-1-font-size, 28rpx);
        color: var(--color-text1-2, #999);
      }

      .icon {
        color: var(--color-text1-2, #999);
        margin-right: -16rpx;
      }
    }
  }

  .store-address {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 22rpx;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;

      .store {
        font-size: var(--p-body-1-font-size, 28rpx);
        color: var(--color-text1-4, #111);
      }

      .detail-address {
        font-size: var(--p-caption-font-size, 24rpx);
        color: var(--color-text1-2, #999);
        margin-top: 4rpx;
      }
    }

    .right {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 56rpx;
      width: 144rpx;
      border: 1rpx solid #d4d5da;
      border-radius: 36rpx;
      font-size: var(--p-caption-font-size, 24rpx);
      color: var(--color-text1-4, #111);
      text-align: center;
    }
  }

  .mapContainer {
    width: 706rpx;
    height: 200rpx;
  }
}