.shopping-form { margin-bottom: 32px; } .shopping-form-inputs { display: flex; align-items: flex-end; margin-bottom: 24px; } .shopping-form-item-wrapper { flex: 1; max-width: 256px; } .shopping-form-label { display: block; margin-bottom: 4px; } .shopping-form-item-input, .shopping-form-quantity-input { width: 100%; height: 32px; padding: 0 12px; border: 1px solid var(--gray-300); border-radius: 4px; background: var(--white); } .shopping-form-quatity-warapper { display: flex; align-items: center; margin-left: 24px; } .shopping-form-quantity-input { max-width: 64px; text-align: center; margin: 0 4px; } .shopping-form-quatity-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 4px; background: var(--gray-100); transition: background-color 0.2s ease-in-out; } .shopping-form-quatity-button:hover { background: var(--orange-500); } .shopping-form-quatity-button:active { background: var(--orange-300); } .shopping-form-quatity-button::before, .shopping-form-increment-button::after { content: ''; position: absolute; width: 16px; height: 4px; border-radius: 4px; background: var(--white); } .shopping-form-increment-button::after { transform: rotate(90deg); } .shopping-form-submit-button { width: 100%; max-width: 128px; height: 32px; border: 0; border-radius: 4px; color: var(--white); font-weight: 700; background: var(--orange-500); transition: background-color 0.25s linear; } .shopping-form-submit-button:hover { background-color: var(--orange-300); } .shopping-form-submit-button:active { background-color: var(--orange-500); }