@everymatrix/lottery-hakuna-ticket-buy 0.0.1

package/dist/collection/components/lottery-hakuna-ticket-buy/lottery-hakuna-ticket-buy.css

@@ -0,0 +1,197 @@
+:host {
+  --emw--color-background-secondary: var(--emw-hakuna-bg-secondary, #120505);
+  --emw--color-primary: var(--emw-hakuna-color-primary, #c52217);
+  --emw--color-background: var(--emw-hakuna-bg-primary, #2c2525);
+  --emw--color-background-tertiary: var(--emw-hakuna-bg-tertiary, #4f2421);
+  --lottery-button-outline-active-bg: var(--emw-hakuna-bg-tertiary, #4f2421);
+  --lottery-button-outline-active-bg: var(--emw-hakuna-bg-tertiary, #4f2421);
+  scrollbar-width: thin;
+  scrollbar-color: var(--emw-hakuna-scroll-scrollbar-thumb-background, #120505) var(--emw-hakuna-scroll-scrollbar-track-background, transparent);
+  /* Scrollbar styles */
+}
+:host::-webkit-scrollbar {
+  width: var(--emw-hakuna-scroll-scrollbar-width, 2px);
+}
+:host::-webkit-scrollbar-track {
+  background: var(--emw-hakuna-scroll-scrollbar-track-background, transparent);
+}
+:host::-webkit-scrollbar-thumb {
+  background: var(--emw-hakuna-scroll-scrollbar-thumb-background, #120505);
+  border-radius: var(--emw-hakuna-scroll-scrollbar-thumb-border-radius, 2px);
+}
+
+.error-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  min-height: 100px;
+  background-color: var(--emw--color-background-secondary, #f5f5f5);
+  border-radius: 4px;
+  margin: 20px 0;
+}
+
+.error-text {
+  font-size: 16px;
+  color: var(--emw--color-error, #ff3d00);
+  font-weight: 500;
+  text-align: center;
+}
+
+.hakuna-ticket-buy {
+  display: flex;
+  justify-content: center;
+}
+.hakuna-ticket-buy .empty-draw {
+  display: flex;
+  color: var(--emw-hakuna-text-primary, #ffffff);
+  width: 335px;
+  padding: 28px 20px;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  background-image: linear-gradient(var(--emw-hakuna-bg-secondary, #120505), var(--emw-hakuna-bg-secondary, #120505)), linear-gradient(to top left, var(--emw-hakuna-color-primary, #c52217) 32%, var(--emw-hakuna-bg-primary, #2c2525) 68%);
+}
+.hakuna-ticket-buy-skeleton {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 auto;
+}
+.hakuna-ticket-buy-skeleton-ticket {
+  box-sizing: border-box;
+  padding: 20px;
+  min-width: 336px;
+  max-width: 414px;
+  background-color: var(--emw-hakuna-ticket-skeleton-bg, #2d2d2d);
+}
+.hakuna-ticket-buy-skeleton-pay {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 16px 24px;
+  background-color: var(--emw-hakuna-ticket-skeleton-bg, #2d2d2d);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.hakuna-ticket-buy-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-height: calc(100vh - 90px);
+  overflow-y: scroll;
+}
+.hakuna-ticket-buy-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 336px;
+  max-width: 414px;
+  width: 100%;
+}
+.hakuna-ticket-buy-operation {
+  display: flex;
+  justify-content: center;
+}
+.hakuna-ticket-buy-pay {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--emw-hakuna-bg-secondary, #120505);
+}
+.hakuna-ticket-buy-pay-info {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.hakuna-ticket-buy-pay-info-item {
+  color: var(--emw-hakuna-text-secondary, #b4a5a5);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 24px 0;
+}
+.dialog-content-icon {
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dialog-content-icon svg {
+  display: block;
+}
+.dialog-content-title {
+  color: var(--emw-hakuna-text-primary, #ffffff);
+  font-size: 16px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.dialog-content-message {
+  color: var(--emw-hakuna-text-secondary, #b4a5a5);
+  font-size: 14px;
+  font-weight: 500;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.dialog-content-footer {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  width: 100%;
+}
+
+.confirm-submit-message {
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  justify-content: center;
+}
+.confirm-submit-message-item {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  color: var(--emw-hakuna-text-secondary, #b4a5a5);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.hakuna-dialog::part(dialog) {
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  background-image: linear-gradient(var(--emw-hakuna-bg-secondary, #120505), var(--emw-hakuna-bg-secondary, #120505)), linear-gradient(to top left, var(--emw-hakuna-color-primary, #c52217) 32%, var(--emw-hakuna-bg-primary, #2c2525) 68%);
+}
+
+.hakuna-skeleton {
+  animation: skeleton-loading 1s linear infinite alternate;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: var(--emw-skeleton-primary-color, #414141);
+  }
+  100% {
+    background-color: var(--emw-skeleton-secondary-color, #2f2929);
+  }
+}