@everymatrix/lottery-tipping-latest-result 0.0.1

package/dist/cjs/lottery-tipping-latest-result.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e5294eca.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('lottery-tipping-latest-result.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["general-tooltip_6.cjs",[[1,"lottery-tipping-latest-result",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"endpointTicket":[513,"endpoint-ticket"],"gameId":[1537,"game-id"],"playerId":[1538,"player-id"],"sessionId":[1537,"session-id"],"hasDrawDates":[32],"lastestDate":[32],"drawList":[32],"curDrawItem":[32],"curDrawItemIdx":[32],"curDrawSelection":[32],"curDrawSelectionBettingType":[32],"curDrawSelectionMap":[32],"curPrizes":[32],"curPrizeMap":[32],"curTurnOver":[32],"isLoading":[32],"playTypes":[32],"bettingTypes":[32],"vendorGameId":[32]},[[0,"changeDate","handleChangeDate"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-tipping-ticket-bet",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"sessionId":[513,"session-id"],"endpoint":[513],"gameId":[513,"game-id"],"drawId":[513,"draw-id"],"totalPages":[1538,"total-pages"],"minTotalPages":[514,"min-total-pages"],"maxTotalPages":[514,"max-total-pages"],"mode":[513],"readPretty":[516,"read-pretty"],"defaultBulletConfigLineGroup":[513,"default-bullet-config-line-group"],"translationData":[32],"limitStylingAppends":[32],"clientStylingUrlContent":[32],"bulletConfigLineGroup":[32],"currentPage":[32],"isLoading":[32],"hasErrors":[32],"dialogConfig":[32],"ticketDataSource":[32],"resetBulletConfig":[64],"getData":[64]},[[0,"lotteryTippingBulletGroupToggle","lotteryTippingBulletGroupSelectionHandler"]],{"translationUrl":["handleNewTranslations"],"gameId":["fetchMatchData"],"sessionId":["fetchMatchData"],"drawId":["fetchMatchData"],"currentPage":["handleCurrentPageChange"]}],[1,"lottery-tipping-calendar",{"date":[1],"highLightDates":[16],"language":[513],"translationUrl":[520,"translation-url"],"weeks":[32],"days":[32],"alterDate":[32],"curDate":[32],"recordInfo":[32],"showCalendar":[32]},null,{"date":["handleDateChange"]}],[1,"lottery-tipping-bullet-group",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"positionIdx":[513,"position-idx"],"theme":[513],"mode":[513],"bulletConfigContent":[513,"bullet-config-content"]},[[0,"lotteryTippingBulletToggle","lotteryTippingBulletSelectionHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"general-tooltip",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"position":[1],"delay":[2],"isVisible":[32],"_tooltipId":[32]},[[1,"mouseenter","handleMouseEnterOrFocus"],[0,"focusin","handleMouseEnterOrFocus"],[1,"mouseleave","handleMouseLeaveOrBlur"],[0,"focusout","handleMouseLeaveOrBlur"],[0,"keydown","handleKeyDown"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-tipping-bullet",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"positionIdx":[514,"position-idx"],"theme":[513],"value":[513],"disabled":[516],"isSelected":[516,"is-selected"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,28 @@
+{
+  "entries": [
+    "components/lottery-tipping-latest-result/lottery-tipping-latest-result.js",
+    "components/lottery-tipping-calendar/lottery-tipping-calendar.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/lottery-tipping-bullet-group",
+      "tags": [
+        "lottery-tipping-bullet",
+        "lottery-tipping-bullet-group"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-tipping-ticket-bet",
+      "tags": [
+        "general-tooltip",
+        "lottery-tipping-ticket-bet"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/lottery-tipping-calendar/lottery-tipping-calendar.css

@@ -0,0 +1,130 @@
+.lottery-tipping-calendar {
+  position: relative;
+  display: inline-block;
+}
+
+.calendar-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.calendar-leave {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.calendar {
+  position: absolute;
+  top: 40px;
+  left: -50%;
+  background: var(--emw--color-background, #fff);
+  color: var(--emw--color-gray-150, #6f6f6f);
+  padding: 16px;
+  width: fit-content;
+  border: var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));
+  border-radius: var(--emw--border-radius-small, 4px);
+  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  z-index: 99;
+}
+.calendar-header {
+  display: flex;
+  align-items: center;
+}
+.calendar-header .date-picker {
+  display: flex;
+  margin: 0 18px;
+  align-items: center;
+}
+.calendar-header .date-picker-delimiter {
+  font-size: 16px;
+  margin: auto 4px;
+}
+.calendar-header .month-plus,
+.calendar-header .month-minus,
+.calendar-header .year-plus,
+.calendar-header .year-minus {
+  cursor: pointer;
+  font-size: 14px;
+}
+.calendar-header .month-plus:hover,
+.calendar-header .month-minus:hover,
+.calendar-header .year-plus:hover,
+.calendar-header .year-minus:hover {
+  color: var(--emw-pool-game-acition-active, #005fdb);
+  transition: color 0.2s;
+}
+.calendar-header .year-minus,
+.calendar-header .month-plus {
+  margin-right: 6px;
+}
+.calendar-content {
+  padding: 3px;
+  width: fix-content;
+}
+.calendar-content .day-item {
+  text-align: center;
+  line-height: 40px;
+  cursor: not-allowed;
+  position: relative;
+  pointer-events: none;
+}
+.calendar-content .day-item:hover {
+  background-color: var(--emw--color-gray-50, #f5f5f5);
+}
+.calendar-content .day-item.isCurDay {
+  border-radius: 4px;
+  background: var(--emw--color-secondary, #fff3b9);
+  background-size: 50%;
+  color: var(--emw--color-gray-300, #333);
+  font-weight: 600;
+  box-shadow: 2px 2px 2px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));
+  cursor: pointer;
+  pointer-events: all;
+}
+.calendar-content .day-item.isHighLight {
+  cursor: pointer;
+  pointer-events: all;
+}
+.calendar-content .day-item.isHighLight::after {
+  content: "";
+  position: absolute;
+  left: calc(50% - 4px);
+  bottom: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--emw--color-error, red);
+}
+.calendar-content-week {
+  display: grid;
+  grid-template-columns: repeat(7, 40px);
+  grid-template-rows: repeat(1, 36px);
+  justify-items: center;
+  align-items: center;
+  border-bottom: var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));
+  color: var(--emw--color-gray-150, #6f6f6f);
+}
+.calendar-content-day {
+  margin-top: 4px;
+  display: grid;
+  grid-template-rows: repeat(6, 40px);
+  grid-template-columns: repeat(7, 40px);
+}
+
+.calling-input {
+  height: 36px;
+  width: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 4px;
+  background-color: var(--emw--color-gray-50, #f5f5f5);
+  border-radius: var(--emw--border-radius-small, 4px);
+  border: var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));
+  cursor: pointer;
+}
+.calling-input .input {
+  color: var(--emw--color-gray-300, #333);
+}

package/dist/collection/components/lottery-tipping-calendar/lottery-tipping-calendar.js

@@ -0,0 +1,306 @@
+import { h } from "@stencil/core";
+import "../../../../../../../libs/vaadin-facade/index";
+import { CalendarOutlined } from "@ant-design/icons-svg";
+import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers";
+import { translate, getTranslations } from "../../utils/locale.utils";
+const calendarIcon = renderIconDefinitionToSVGElement(CalendarOutlined, {
+    extraSVGAttrs: { width: '18px', height: '18px', fill: '#fed275' }
+});
+export class LotteryTippingCalendar {
+    constructor() {
+        this.handleOutsideClick = (event) => {
+            if (!this.showCalendar)
+                return;
+            const path = event.composedPath ? event.composedPath() : [];
+            // check if clicked on calendar
+            const isCalendarClick = path.includes(this.calendarRef);
+            // check if click select option
+            const isSelectOption = path.some((el) => {
+                var _a, _b;
+                return el instanceof HTMLElement &&
+                    (((_a = el.getAttribute('part')) === null || _a === void 0 ? void 0 : _a.includes('item')) || ((_b = el.getAttribute('part')) === null || _b === void 0 ? void 0 : _b.includes('overlay')));
+            });
+            if (!isCalendarClick && !isSelectOption) {
+                this.showCalendar = false;
+            }
+        };
+        this.onYearMinus = () => {
+            const years = this.yearOptions.map((item) => Number(item.value));
+            if (this.alterDate.year - 1 < Math.min(...years))
+                return;
+            this.alterDate.year--;
+            this.loadRecords();
+        };
+        this.onYearPlus = () => {
+            const years = this.yearOptions.map((item) => Number(item.value));
+            if (this.alterDate.year + 1 > Math.max(...years))
+                return;
+            this.alterDate.year++;
+            this.loadRecords();
+        };
+        this.onMonthMinus = () => {
+            if (this.alterDate.month === 0) {
+                this.onYearMinus();
+                this.alterDate.month = 11;
+            }
+            else {
+                this.alterDate.month--;
+                this.loadRecords();
+            }
+        };
+        this.onMonthPlus = () => {
+            if (this.alterDate.month === 11) {
+                this.onYearPlus();
+                this.alterDate.month = 0;
+            }
+            else {
+                this.alterDate.month++;
+                this.loadRecords();
+            }
+        };
+        this.onYearChange = (e) => {
+            this.alterDate.year = parseInt(e.detail.value);
+            this.loadRecords();
+        };
+        this.onMonthChange = (e) => {
+            this.alterDate.month = parseInt(e.detail.value) - 1;
+            this.loadRecords();
+        };
+        this.date = '2025-05-19T02:00:00Z';
+        this.highLightDates = undefined;
+        this.language = 'en';
+        this.translationUrl = undefined;
+        this.weeks = undefined;
+        this.days = [];
+        this.alterDate = { year: 0, month: 0, day: 0 };
+        this.curDate = { year: 0, month: 0, day: 0 };
+        this.recordInfo = [];
+        this.showCalendar = false;
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            getTranslations(JSON.parse(this.translationUrl));
+        }
+        this.weeks = translate('weeks', this.language);
+        const d = this.date ? new Date(this.date) : new Date();
+        this.alterDate = { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+        this.curDate = Object.assign({}, this.alterDate);
+        this.loadRecords();
+    }
+    handleDateChange() {
+        const d = this.date ? new Date(this.date) : new Date();
+        this.alterDate = { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+        this.curDate = Object.assign({}, this.alterDate);
+        this.loadRecords();
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    get yearOptions() {
+        const years = Array.from({ length: 101 }, (_, i) => this.alterDate.year - 50 + i);
+        return years.map((item) => {
+            return {
+                label: String(item),
+                value: String(item)
+            };
+        });
+    }
+    get monthOptions() {
+        const months = Array.from({ length: 12 }, (_, i) => i + 1);
+        return months.map((item) => {
+            return {
+                label: String(item),
+                value: String(item)
+            };
+        });
+    }
+    loadRecords() {
+        const { year, month } = this.alterDate;
+        this.setDays(year, month);
+    }
+    setDays(year, month) {
+        this.days = [];
+        const firstDayOfMonth = new Date(year, month, 1);
+        const firstDayWeek = firstDayOfMonth.getDay();
+        const startDate = new Date(year, month, 1 - firstDayWeek);
+        for (let i = 0; i < 42; i++) {
+            const temp = new Date(startDate);
+            temp.setDate(startDate.getDate() + i);
+            const day = {
+                date: temp.getDate(),
+                month: temp.getMonth(),
+                year: temp.getFullYear()
+            };
+            this.days.push(day);
+        }
+    }
+    getFullDayOfMonth(year, month) {
+        return new Date(year, month, 0).getDate();
+    }
+    showFormatedDate(date) {
+        return `${date.day}/${date.month + 1}/${date.year}`;
+    }
+    handleSelectDate(curDay, curMonth, curYear) {
+        this.alterDate.day = curDay;
+        this.curDate = Object.assign({}, this.alterDate);
+        this.showCalendar = false;
+        const formattedHighLightArr = this.highLightDates.map((date) => {
+            const d = new Date(date);
+            return { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+        });
+        const idx = formattedHighLightArr.findIndex((obj) => {
+            const { year, month, day } = obj;
+            return curMonth === month && curYear === year && curDay === day;
+        });
+        console.log('idx', idx);
+        if (idx > -1) {
+            this.changeDate.emit(idx);
+        }
+    }
+    tellIsCurDay(curDay, curMonth, curYear) {
+        return this.curDate.day === curDay && this.curDate.month === curMonth && this.curDate.year === curYear;
+    }
+    tellIsHighLight(curDay, curMonth, curYear) {
+        if (!this.highLightDates || !this.highLightDates.length)
+            return false;
+        const formattedHighLightArr = this.highLightDates.map((date) => {
+            const d = new Date(date);
+            return { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+        });
+        return formattedHighLightArr.some((obj) => {
+            const { year, month, day } = obj;
+            return curMonth === month && curYear === year && curDay === day;
+        });
+    }
+    render() {
+        const calendarClass = ['calendar', this.showCalendar ? 'calendar-visible' : 'calendar-leave'];
+        return (h("div", { key: 'fc24c5dd2b9d2cfd536387e952428d27f826466c', class: "lottery-tipping-calendar", ref: (el) => (this.calendarRef = el) }, h("div", { key: '6264b50c7d8de0f71c832c7bb27eb8a6303e2b85', class: "calling-input", onClick: () => {
+                this.showCalendar = true;
+            } }, h("div", { key: '90e8ce4e33a6d8a70eb93e665c67d24bd0a87453', class: "calling-input-text" }, this.showFormatedDate(this.curDate)), h("div", { key: '9e71b455e3948437a0986e5e90bd0b0fb7d236bc', class: "calling-input-icon", innerHTML: calendarIcon })), h("div", { key: '79386c81656a1cd2a498b051cc809ebde2729a30', class: calendarClass.join(' ') }, h("div", { key: '3697dd004c6b1466df355e2eaee151910015b35d', class: "calendar-header" }, h("div", { key: '80dee2e0d580773a0253d727e65a0e073efc7c97', class: "date-controller year-minus", onClick: this.onYearMinus }, "<"), h("div", { key: '8bc265b9202d50406d019c55afada0759c0f5398', class: "date-controller month-minus", onClick: this.onMonthMinus }, "<"), h("div", { key: '35d0c1727d6cb5264aa6bcf2184201e24877861b', class: "date-picker" }, h("div", { key: 'e938cf588c8b36d87b1c8ec47e2cbb4c126f050b', class: "date-picker-year" }, h("vaadin-select", { key: 'd20ef0f3b94f20dcfdaf2333eeef5f7468af7bdd', items: this.yearOptions, value: this.alterDate.year, style: { '--vaadin-field-default-width': '90px' }, "on-value-changed": this.onYearChange.bind(this) })), h("div", { key: '1deca1b5ba794c62ae974e2a0c5de9bc2c37c3d8', class: "date-picker-delimiter" }, "-"), h("div", { key: 'abb81ed8f6f2cd324528d84342e16ba2f5e84e8a', class: "date-picker-month" }, h("vaadin-select", { key: '5d03129f4c7b2f8f5194cb64cebffc4e971f6057', items: this.monthOptions, value: this.alterDate.month + 1, style: { '--vaadin-field-default-width': '64px' }, "on-value-changed": this.onMonthChange.bind(this) })), h("div", { key: 'c167056f3977a343499076fd6dfdbeb825764f79', class: "date-picker-delimiter" }, "-"), h("div", { key: 'c4615ea58b78988d48050de6df4234ffd513a19f', class: "date-picker-day" }, this.alterDate.day)), h("div", { key: '9dd8b235e7b2e3bfce6107c2c6d27a05d6fc325d', class: "date-controller month-plus", onClick: this.onMonthPlus }, ">"), h("div", { key: '5a5a382afca4f2d14f9a930284c39ca319f0c06c', class: "date-controller year-plus", onClick: this.onYearPlus }, ">")), h("div", { key: 'd662c595069a67782242f919cbf5c1f0d85a15b0', class: "calendar-content" }, h("div", { key: '0a90711988abd14c3d59891b38d079186a12009d', class: "calendar-content-week" }, this.weeks.map((week) => (h("div", { class: "week-item" }, week)))), h("div", { key: 'e5444c3b433b1b4920a3581c88157ae2559e448c', class: "calendar-content-day" }, this.days.map((item) => (h("div", { class: {
+                'day-item': true,
+                isCurDay: this.tellIsCurDay(item.date, item.month, item.year),
+                isHighLight: this.tellIsHighLight(item.date, item.month, item.year)
+            }, onClick: () => this.handleSelectDate(item.date, item.month, item.year) }, item.date))))))));
+    }
+    static get is() { return "lottery-tipping-calendar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-tipping-calendar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-tipping-calendar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "date": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "date",
+                "reflect": false,
+                "defaultValue": "'2025-05-19T02:00:00Z'"
+            },
+            "highLightDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "translationUrl": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "translation-url",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "weeks": {},
+            "days": {},
+            "alterDate": {},
+            "curDate": {},
+            "recordInfo": {},
+            "showCalendar": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeDate",
+                "name": "changeDate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "date",
+                "methodName": "handleDateChange"
+            }];
+    }
+}

package/dist/collection/components/lottery-tipping-latest-result/index.js

@@ -0,0 +1 @@
+export { LotteryTippingLatestResult } from './lottery-tipping-latest-result';

package/dist/collection/components/lottery-tipping-latest-result/lottery-tipping-latest-result.css

@@ -0,0 +1,133 @@
+.lottery-tipping-latest-result {
+  padding: 16px;
+  container-type: inline-size;
+}
+.lottery-tipping-latest-result .date-selection {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  width: 400px;
+}
+.lottery-tipping-latest-result .date-selection-leftIcon, .lottery-tipping-latest-result .date-selection-rightIcon {
+  cursor: pointer;
+}
+
+.LotteryTippingTicketController__segmented-control {
+  height: 2.2rem;
+  display: inline-flex;
+  background-color: var(--emw--color-gray-100, #e6e6e6);
+  border-radius: 2rem;
+  padding: 0.2rem;
+}
+.LotteryTippingTicketController__segment {
+  background-color: transparent;
+  border: none;
+  padding: 0.3rem 0.8rem;
+  cursor: pointer;
+  font-weight: 500;
+  border-radius: 2rem;
+  outline: none;
+  transition: background-color 0.25s ease, color 0.25s ease;
+  white-space: nowrap;
+}
+.LotteryTippingTicketController__segment--active {
+  background-color: var(--emw--color-background, #fff);
+  color: #000000;
+  font-weight: 600;
+}
+.LotteryTippingTicketController__segment:not(.LotteryTippingTicketController__segment--active):hover {
+  background-color: var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));
+}
+
+.betting-type {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+.betting-type-title {
+  font-weight: 600;
+  font-size: 16px;
+}
+.betting-type-text {
+  font-size: 16px;
+}
+
+.result-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 60%;
+  margin: 0 auto;
+}
+.result-wrapper .winning-result {
+  width: 100%;
+  margin-top: 20px;
+}
+.result-wrapper .prize-result {
+  width: 100%;
+  margin-top: 20px;
+}
+.result-wrapper .prize-result-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+.result-wrapper .prize-result-table {
+  width: 100%;
+}
+.result-wrapper .prize-result-table-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+.result-wrapper .prize-result-table-column {
+  text-align: left;
+  padding: 12px 14px;
+  width: 160px;
+  color: rgb(85, 85, 85);
+  font-size: 14px;
+  width: calc((100% - 2px) / 3);
+}
+.result-wrapper .prize-result-table-header {
+  width: 100%;
+  background-color: var(--emw--color-gray-100, #e6e6e6);
+  border-radius: 4px;
+}
+.result-wrapper .prize-result-table .prize-result-table-header .prize-result-table-column {
+  color: var(--emw--color-gray-300, #333);
+  font-weight: 600;
+  border-right: 1px solid var(--emw--color-background, #fff);
+}
+.result-wrapper .prize-result-table .prize-result-table-body .prize-result-table-row:hover {
+  background-color: var(--emw--color-gray-50, #f5f5f5);
+}
+
+@container (max-width: 980px) and (min-width: 780px) {
+  .result-wrapper {
+    width: 84%;
+  }
+}
+@container (max-width: 780px) and (min-width: 480px) {
+  .result-wrapper {
+    width: 100%;
+  }
+}
+@container (max-width: 480px) {
+  .result-wrapper {
+    width: 100%;
+  }
+  .result-wrapper .winning-result {
+    width: 100%;
+    margin-top: 14px;
+  }
+  .result-wrapper .prize-result {
+    width: 100%;
+  }
+  .result-wrapper .prize-result-table-column {
+    padding: 6px;
+    width: 100px;
+  }
+}