Skin for DS6

{
    "dependencies": {
      "@ebay/skin": "^5"
    }
}
    

{
    "dependencies": [
        "@ebay/skin"
    ]
}
    

{
    "dependencies": [
        "@ebay/skin/less",
        "@ebay/skin/global",
        "@ebay/skin/button"
    ]
}
    

myLasso.lassoPage({
    flags: ['skin-ds6']
});
    

<lasso-page flags=['skin-ds6']>
   ...
</lasso-page>
    

<nav aria-labelledby="breadcrumbs-heading" class="breadcrumb" role="navigation">
    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
    <ul>
        <li><a href="https://www.ebay.com/">ebay</a></li>
        <li><a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a></li>
        <li><a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a></li>
        <li><span aria-current="page">Smart Watch Bands</span></li>
    </ul>
</nav>
    

<nav aria-labelledby="breadcrumbs-heading" class="breadcrumb" role="navigation">
    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
    <ul>
        <li><a href="https://www.ebay.com/">ebay</a></li>
        <li><a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a></li>
        <li><a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a></li>
    </ul>
</nav>
    

<span class="checkbox">
    <input class="checkbox__control" type="checkbox" name="checkbox-default" />
    <span class="checkbox__icon"></span>
</span>
    

<span class="checkbox">
    <input class="checkbox__control" type="checkbox" name="checkbox-disabled" checked disabled  />
    <span class="checkbox__icon"></span>
</span>
    

<fieldset>
    <legend>Choose an Option</legend>
    <span class="field">
        <span class="checkbox field__control">
            <input class="checkbox__control" id="group-checkbox-1" type="checkbox" value="1" name="checkbox-group" />
            <span class="checkbox__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-1">Option 1</label>
    </span>
    <span class="field">
        <span class="checkbox field__control">
            <input class="checkbox__control" id="group-checkbox-2" type="checkbox" value="2" name="checkbox-group" />
            <span class="checkbox__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-2">Option 2</label>
    </span>
    <span class="field">
        <span class="checkbox field__control">
            <input class="checkbox__control" id="group-checkbox-3" type="checkbox" value="3" name="checkbox-group" />
            <span class="checkbox__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-3">Option 3</label>
    </span>
</fieldset>
    

<span class="checkbox" style="color: #71c63e">
    <input class="checkbox__control" type="checkbox" />
    <span class="checkbox__icon" hidden>
        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
            <use xlink:href="#icon-checkbox-unchecked"></use>
        </svg>
        <svg aria-hidden="true" class="checkbox__checked" focusable="false">
            <use xlink:href="#icon-checkbox-checked"></use>
        </svg>
    </span>
</span>
    

<span class="checkbox" style="color: #71c63e">
    <input class="checkbox__control" name="checkbox-custom-icon" type="checkbox" />
    <span class="checkbox__icon" hidden>
        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
            <use xlink:href="#icon-save"></use>
        </svg>
        <svg aria-hidden="true" class="checkbox__checked" focusable="false">
            <use xlink:href="#icon-save-selected"></use>
        </svg>
    </span>
</span>
    

const dialogEl = document.querySelector(".dialog");
const windowEl = dialogEl.querySelector(".dialog__window");
const openBtnEl = document.querySelector("#dialog-open");
const closeBtnEl = dialogEl.querySelector(".dialog__close");

// Trigger dialog show animation.
openBtnEl.addEventListener("click", () => {
    dialogEl.classList.add("dialog--show-init");
    dialogEl.removeAttribute("hidden");

    requestAnimationFrame(() => requestAnimationFrame(() => {
        // Two RAFS to ensure this happens on the next animation frame.
        dialogEl.classList.remove("dialog--show-init");
        dialogEl.classList.add("dialog--show");

        windowEl.addEventListener("transitionend", () => {
            /**
             * The window animation is the longest, so we wait for it to
             * finish before removing the classes.
             */
            dialogEl.classList.remove("dialog--show");
        }, { once: true });
    }));
});

// Trigger dialog hide animation. (In the real world the dialog mask) should also be handled.
closeBtnEl.addEventListener("click", () => {
    dialogEl.classList.add("dialog--hide-init");
    dialogEl.setAttribute("hidden", "");

    requestAnimationFrame(() => requestAnimationFrame(() => {
        // Two RAFS to ensure this happens on the next animation frame.
        dialogEl.classList.remove("dialog--hide-init");
        dialogEl.classList.add("dialog--hide");

        windowEl.addEventListener("transitionend", () => {
            /**
             * The window animation is the longest, so we wait for it to
             * finish before removing the classes.
             */
            dialogEl.classList.remove("dialog--hide");
        }, { once: true });
    }));
});

    

<span class="floating-label">
    <label class="floating-label__label" for="firstName">First Name</label>
    <span class="textbox">
        <input class="textbox__control textbox__control--underline" id="firstName" type="text" />
    </span>
</span>
    

<span class="floating-label">
    <label class="floating-label__label" for="lastName">Last Name</label>
    <span class="textbox">
        <input class="textbox__control textbox__control--underline" id="lastName" type="text" value="Smith" />
    </span>
</span>
    

<span class="floating-label">
    <label class="floating-label__label" for="dob">Date Of Birth</label>
    <span class="textbox">
        <input class="textbox__control textbox__control--underline" id="dob" type="text" placeholder="MM/DD/YYYY" />
    </span>
</span>
    

<span class="floating-label">
    <label class="floating-label__label floating-label__label--disabled" for="firstName">First Name</label>
    <span class="textbox">
        <input class="textbox__control textbox__control--underline" id="firstName02" type="text" disabled />
    </span>
</span>
    

<span class="floating-label">
    <label class="floating-label__label" for="firstName">First Name</label>
    <span class="textbox">
        <input class="textbox__control textbox__control--underline" id="firstName03" type="text" aria-invalid="true" />
    </span>
</span>
    

<span class="menu">
    <button class="expand-btn" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Radio menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitemradio" aria-checked="true">
            <span>Radio menu item 1</span>
            <span class="menu__status"></span>
        </div>
        <div class="menu__item" role="menuitemradio" aria-checked="false">
            <span>Radio menu item 2</span>
            <span class="menu__status"></span>
        </div>
        <div class="menu__item" role="menuitemradio" aria-checked="false">
            <span>Radio menu item 3</span>
            <span class="menu__status"></span>
        </div>
    </div>
</span>
    

<span class="menu">
    <button class="expand-btn" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Checkbox menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitemcheckbox" aria-checked="true" height="8" width="8">
            <span>Item 1</span>
            <span class="menu__status"></span>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="true" height="8" width="8">
            <span>Item 2</span>
            <span class="menu__status"></span>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="false" height="8" width="8">
            <span>Item 3</span>
            <span class="menu__status"></span>
        </div>
    </div>
</span>
    

<span class="fake-menu">
    <button class="expand-btn" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Fake menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <ul class="fake-menu__items">
        <li>
            <a aria-current="page" class="fake-menu__item" href="http://www.ebay.com">
                <span>Link 1</span>
                <span class="fake-menu__status"></span>
            </a>
        </li>
        <li>
            <a href="http://www.ebay.com" class="fake-menu__item">Link 2</a>
        </li>
        <li>
            <a href="http://www.ebay.com" class="fake-menu__item">Link 3</a>
        </li>
        <li>
            <a href="http://www.ebay.com" class="fake-menu__item">Link 4</a>
        </li>
    </ul>
</span>
    

<span class="menu">
    <button class="expand-btn expand-btn--primary" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Primary Menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <!-- menu items omitted from example code -->
</span>

<span class="menu">
    <button class="expand-btn expand-btn--secondary" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Secondary Menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <!-- menu items omitted from example code -->
</span>
    

<section aria-labelledby="confirmation-status" class="page-notice page-notice--confirmation">
    <h2 class="page-notice__status" id="confirmation-status">
        <span aria-label="Confirmation" role="img"></span>
    </h2>
    <div class="page-notice__content">
        <p><strong>Congrats!</strong> You just listed <a href="#">"Spam and Eggs From the Cow's Perspective</a> (paperback)."</p>
    </div>
</section>

<section aria-labelledby="priority-status" class="page-notice page-notice--priority">
    <h2 class="page-notice__status" id="priority-status">
        <span aria-label="Priority" role="img"></span>
    </h2>
    <div class="page-notice__content">
        <p><strong>Error.</strong> Please take another look at the following:<br /><a href="#">Card number</a>, <a href="#">Expiration date</a> &amp; <a href="#">Security code</a>.</p>
    </div>
</section>

<section aria-labelledby="information-status" class="page-notice page-notice--information" role="region">
    <h2 class="page-notice__status" id="information-status">
        <span aria-label="Information" role="img"></span>
    </h2>
    <div class="page-notice__content">
        <p><strong>Good news!</strong> You get free shipping on your next pair of shoes! <a href="#">Learn more</a>.</p>
    </div>
</section>
    

<section aria-labelledby="confirmation-status" class="page-notice page-notice--confirmation">
    <h2 class="page-notice__status" id="confirmation-status">
        <span aria-label="Confirmation" role="img"></span>
    </h2>
    <div class="page-notice__content">
        <p><strong>Congrats!</strong> You just listed <a href="#">"Spam and Eggs From the Cow's Perspective</a> (paperback)."</p>
        <p>You can check <a href="#">your listing</a> or <a href="#">sell another item</a></p>
    </div>
    <button aria-label="Dismiss notice" class="page-notice__close">
        <span></span>
    </button>
</section>

<section aria-labelledby="information-status" class="page-notice page-notice--information" role="region">
    <h2 class="page-notice__status" id="information-status">
        <span aria-label="Information" role="img"></span>
    </h2>
    <div class="page-notice__content">
        <p><strong>Good news!</strong> You get free shipping on your next pair of shoes! <a href="#">Learn more</a>.</p>
    </div>
    <button aria-label="Dismiss notice" class="page-notice__close">
        <span></span>
    </button>
</section>
     

<div class="inline-notice inline-notice--confirmation">
    <span class="inline-notice__status">
        <span aria-label="Confirmation" role="img"></span>
    </span>
    <span class="inline-notice__content">
        <p>Delivered on May 1, 2017</p>
        <p>Tracking number: <a href="#">93878473859376898908657567</a></p>
    </span>
</div>

<div class="inline-notice inline-notice--priority">
    <span class="inline-notice__status">
        <span aria-label="Priority" role="img"></span>
    </span>
    <span class="inline-notice__content">
        <p>Update your credit card.</p>
    </span>
</div>

<div class="inline-notice inline-notice--information">
    <span class="inline-notice__status">
        <span aria-label="Information" role="img"></span>
    </span>
    <span class="inline-notice__content">
        <p>Global Shipping Program transaction.</p>
    </span>
</div>
    

<nav class="pagination" aria-labelledby="pagination-heading" role="navigation">
    <span aria-live="polite" role="status">
        <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
    </span>
    <a aria-disabled="true" aria-label="Previous Page" class="pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
        <span></span>
    </a>
    <ol class="pagination__items">
        <li>
            <a aria-current="page" href="http://www.ebay.com/sch/i.html?_nkw=guitars" class="pagination__item">1</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2" class="pagination__item">2</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3" class="pagination__item">3</a>
        </li>
        ...
    </ol>
    <a aria-label="Next Page" class="pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
        <span></span>
    </a>
</nav>
            

<nav class="pagination pagination--fluid" aria-labelledby="pagination-heading" role="navigation">
    <span aria-live="polite" role="status">
        <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
    </span>
    <a aria-disabled="true" aria-label="Previous Page" class="pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
        <span></span>
    </a>
    <ol class="pagination__items">
        <li>
            <a aria-current="page" href="http://www.ebay.com/sch/i.html?_nkw=guitars" class="pagination__item">1</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2" class="pagination__item">2</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3" class="pagination__item">3</a>
        </li>
        ...
    </ol>
    <a aria-label="Next Page" class="pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
        <span></span>
    </a>
</nav>
            

<span class="radio">
    <input class="radio__control" type="radio" />
    <span class="radio__icon"></span>
</span>
    

<span class="radio">
    <input class="radio__control" type="radio" checked disabled />
    <span class="radio__icon"></span>
</span>
    

<fieldset>
    <legend>Choose an Option</legend>
    <span class="field">
        <span class="field__control radio">
            <input class="radio__control" id="group-radio-1" type="radio" value="1" name="radio-group" />
            <span class="radio__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-radio-1">Option 1</label>
    </span>
    <span class="field">
        <span class="field__control radio">
            <input class="radio__control" id="group-radio-2" type="radio" value="2" name="radio-group" />
            <span class="radio__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-radio-2">Option 2</label>
    </span>
    <span class="field">
        <span class="field__control radio">
            <input class="radio__control" id="group-radio-3" type="radio" value="3" name="radio-group" />
            <span class="radio__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-radio-3">Option 3</label>
    </span>
</fieldset>
    

<span class="radio" style="color: #71c63e">
    <input class="radio__control" type="radio" />
    <span class="radio__icon" hidden>
        <svg aria-hidden="true" class="radio__unchecked" focusable="false">
            <use xlink:href="#icon-radio-unchecked"></use>
        </svg>
        <svg aria-hidden="true" class="radio__checked" focusable="false">
            <use xlink:href="#icon-radio-checked"></use>
        </svg>
    </span>
</span>
    

<span class="field__control radio" style="color: #ff5151">
    <input class="radio__control" type="radio" />
    <span class="radio__icon" hidden>
        <svg aria-hidden="true" class="radio__unchecked" focusable="false">
            <use xlink:href="#icon-radio-unchecked"></use>
        </svg>
        <svg aria-hidden="true" class="radio__checked" focusable="false">
            <use xlink:href="#icon-confirmation"></use>
        </svg>
    </span>
</span>
    

<svg hidden>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=2.25, width=21, height=19.5 -->
    <symbol id="icon-arrow-left" viewBox="1.5 2.25 21 19.5">
        <path d="M6.183 10.817l6.902-6.596c.488-.468.43-1.238 0-1.65-.432-.412-1.27-.443-1.725 0-.458.443-9.86 9.424-9.86 9.424s9.293 8.854 9.86 9.424c.566.57 1.285.422 1.725 0 .441-.421.557-1.092 0-1.648-.558-.557-6.902-6.597-6.902-6.597H21.22c.867 0 1.28-.589 1.28-1.18 0-.588-.408-1.177-1.28-1.177H6.183z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=2.25, width=21, height=19.5 -->
    <symbol id="icon-arrow-right" viewBox="1.5 2.25 21 19.5">
        <path d="M17.817 13.226s-6.413 6.129-6.9 6.597c-.49.47-.432 1.236 0 1.65.43.412 1.267.443 1.723 0 .458-.443 9.86-9.425 9.86-9.425s-9.292-8.855-9.86-9.425c-.566-.568-1.283-.421-1.723 0-.442.422-.56 1.093 0 1.65.556.556 6.9 6.597 6.9 6.597H2.782c-.868 0-1.282.588-1.282 1.178s.41 1.178 1.282 1.178h15.035z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=3, y=3, width=18, height=18 -->
    <symbol id="icon-arrow-move" viewBox="3 3 18 18">
        <path d="M7.946 5.886s10.719.002 11.536 0c.817-.002 1.441-.722 1.441-1.442S20.251 2.996 19.482 3C18.712 3.006 3 3 3 3s.024 15.511 0 16.483c-.023.97.705 1.442 1.443 1.442.737 0 1.421-.488 1.442-1.442.02-.951 0-11.537 0-11.537l12.566 12.567c.724.724 1.586.557 2.101.042.515-.515.687-1.374-.041-2.102L7.946 5.886z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.2, y=2.1, width=21.55, height=20 -->
    <symbol id="icon-arrow-right-bold" viewBox="1.2 2.1 22 21">
        <path d="M11.704 22.098a1.48 1.48 0 0 1-1.02-.386 1.38 1.38 0 0 1-.413-.996c0-.375.146-.721.415-.978.411-.397 5.078-4.857 6.494-6.21H2.706c-1.035 0-1.506-.726-1.506-1.4 0-.679.471-1.406 1.506-1.406h14.472c-1.42-1.353-6.02-5.736-6.497-6.213-.292-.291-.445-.635-.442-.996a1.37 1.37 0 0 1 .447-.975c.501-.479 1.354-.681 2.037.003.561.56 9.765 9.334 9.856 9.423l.173.163-.172.162c-.093.09-9.407 8.985-9.86 9.422-.264.258-.639.387-1.016.387"></path>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=5.25, width=21, height=12 -->
    <symbol id="icon-chevron-up" viewBox="1.5 5.25 21 12">
        <path d="M11.175 5.603l-9.333 9.6a1.225 1.225 0 0 0 0 1.698c.22.226.507.343.796.35h.058c.289-.007.575-.124.796-.35L12 8.149l8.508 8.752c.222.226.509.343.798.35h.055c.29-.007.576-.124.797-.35a1.225 1.225 0 0 0 0-1.698l-9.332-9.6A1.156 1.156 0 0 0 12 5.25a1.15 1.15 0 0 0-.825.353z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=6.75, width=21, height=12 -->
    <symbol id="icon-chevron-down" viewBox="1.5 6.75 21 12">
        <path d="M20.506 7.101L12 15.854 3.492 7.1a1.149 1.149 0 0 0-1.651 0c-.215.222-.329.51-.341.801v.096c.012.291.126.579.34.801l9.335 9.6c.22.226.508.343.796.351h.057c.288-.008.576-.125.797-.351l9.333-9.6a1.21 1.21 0 0 0 .342-.81V7.91a1.21 1.21 0 0 0-.342-.81 1.148 1.148 0 0 0-1.652 0z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=6, y=1.5, width=12, height=21 -->
    <symbol id="icon-chevron-left" viewBox="6 1.5 12 21">
        <path d="M15.953 1.842L6.35 11.174a1.155 1.155 0 0 0-.351.798v.057c.008.288.125.576.351.796l9.602 9.333c.223.22.514.332.808.342h.078c.294-.01.585-.123.81-.342a1.145 1.145 0 0 0 0-1.65L8.896 12l8.753-8.508a1.145 1.145 0 0 0 0-1.65A1.216 1.216 0 0 0 16.8 1.5a1.21 1.21 0 0 0-.848.342z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=6, y=1.5, width=12, height=21 -->
    <symbol id="icon-chevron-right" viewBox="6 1.5 12 21">
        <path d="M6.351 1.842c-.226.22-.343.507-.351.796v.056c.008.29.125.578.351.798L15.102 12l-8.751 8.508c-.226.22-.343.509-.351.798v.055c.008.29.125.576.351.797.225.219.516.331.81.342h.078c.294-.01.585-.123.81-.342l9.6-9.333c.226-.22.343-.508.351-.798v-.054a1.158 1.158 0 0 0-.351-.8l-9.6-9.331A1.216 1.216 0 0 0 7.2 1.5c-.308 0-.615.114-.849.342z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.2, y=5.7, width=21.6, height=12.58 -->
    <symbol id="icon-chevron-up-bold" viewBox="1.2 5.7 21.6 12.58">
        <path d="M11.964 5.7c.451.009.809.166 1.075.441l9.336 9.6c.259.268.41.622.425.999v.108a1.528 1.528 0 0 1-.425 1.008c-.559.573-1.528.57-2.081 0L12 9.326l-8.292 8.531c-.558.57-1.525.57-2.08 0a1.507 1.507 0 0 1-.428-1.009v-.087c.012-.392.165-.75.428-1.02l9.332-9.6a1.443 1.443 0 0 1 1.004-.441"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.35, y=5.7, width=21.6, height=12.58 -->
    <symbol id="icon-chevron-down-bold" viewBox="1.35 5.7 21.6 12.58">
        <path d="M12.186 18.285c-.451-.009-.809-.167-1.075-.441l-9.337-9.6a1.527 1.527 0 0 1-.424-.999v-.108c.015-.386.166-.741.424-1.008.56-.573 1.529-.57 2.082 0l8.294 8.53 8.292-8.532c.558-.57 1.526-.57 2.08 0 .265.27.416.629.428 1.01v.087c-.012.391-.165.75-.427 1.02l-9.333 9.6a1.443 1.443 0 0 1-1.004.441"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=4.12, y=4.1, width=15.77, height=15.8 -->
    <symbol id="icon-checkbox-unchecked" viewBox="4.12 4.1 15.77 15.8">
        <path fill="none" stroke-width="1" d="M18.56 5.25H5.44a.19.19 0 0 0-.19.187v13.126a.19.19 0 0 0 .19.187h13.12a.19.19 0 0 0 .19-.187V5.437a.19.19 0 0 0-.19-.187zM4.116 19.9h15.768V4.1H4.116v15.8z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=4.12, y=4.1, width=15.77, height=15.8 -->
    <symbol id="icon-checkbox-checked" viewBox="4.12 4.1 15.77 15.8">
        <path d="M4.116 19.9V4.1h15.768v15.8H4.116zm4.28-7.782a.725.725 0 0 0-1.06 0 .816.816 0 0 0 0 1.114l2.998 3.013a.725.725 0 0 0 1.061 0l6.001-6.3a.816.816 0 0 0 0-1.114.725.725 0 0 0-1.06 0l-5.471 5.744-2.469-2.457z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=3, y=3, width=18, height=18 -->
    <symbol id="icon-radio-unchecked" viewBox="3 3 18 18">
        <path d="M12 3a9 9 0 1 0 9 9 9 9 0 0 0-9-9m0 1.059c4.38 0 7.941 3.563 7.941 7.941S16.38 19.941 12 19.941 4.059 16.378 4.059 12 7.62 4.059 12 4.059"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=3, y=3, width=18, height=18 -->
    <symbol id="icon-radio-checked" viewBox="3 3 18 18">
        <path d="M12 3a9 9 0 1 0 9 9 9 9 0 0 0-9-9m0 1.059c4.38 0 7.941 3.563 7.941 7.941S16.38 19.941 12 19.941 4.059 16.378 4.059 12 7.62 4.059 12 4.059zm0 13.191a5.25 5.25 0 1 0 0-10.5 5.25 5.25 0 0 0 0 10.5z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=6, y=6.45, width=13.5, height=10.12 -->
    <symbol id="icon-tick" viewBox="6 6.45 13.5 10.12">
        <path d="M7.646 10.972a.932.932 0 0 0-1.364 0 1.049 1.049 0 0 0 0 1.432l3.856 3.874a.932.932 0 0 0 1.364 0l7.716-8.1a1.049 1.049 0 0 0 0-1.431.932.932 0 0 0-1.364 0L10.82 14.13l-3.174-3.159z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=5.25, width=21, height=13.5 -->
    <symbol id="icon-menu" viewBox="1.5 5.25 21 13.5">
        <path d="M21.55 16.76c.524 0 .95.446.95.996 0 .548-.426.994-.95.994H2.45c-.524 0-.95-.446-.95-.994 0-.55.426-.996.95-.996h19.1zm0-5.756c.524 0 .95.447.95.997 0 .548-.426.995-.95.995H2.45c-.524 0-.95-.447-.95-.995 0-.55.426-.997.95-.997h19.1zM2.45 7.242c-.524 0-.95-.447-.95-.996 0-.549.426-.996.95-.996h19.1c.524 0 .95.447.95.996 0 .549-.426.996-.95.996H2.45z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-close" viewBox="1.5 1.5 21 21">
        <path d="M22.182 3.856c.522-.554.306-1.394-.234-1.938-.54-.543-1.433-.523-1.826-.135C19.73 2.17 11.955 10 11.955 10S4.225 2.154 3.79 1.783c-.438-.371-1.277-.4-1.81.135-.533.537-.628 1.513-.25 1.938.377.424 8.166 8.218 8.166 8.218s-7.85 7.864-8.166 8.219c-.317.354-.34 1.335.25 1.805.59.47 1.24.455 1.81 0 .568-.456 8.166-7.951 8.166-7.951l8.167 7.86c.747.72 1.504.563 1.96.09.456-.471.609-1.268.1-1.804-.508-.537-8.167-8.219-8.167-8.219s7.645-7.665 8.167-8.218z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-cart" viewBox="1.5 1.5 21 21">
        <path d="M9.133 6.438a.966.966 0 0 0-.906 1.279c.124.391.5.647.907.647l11.35-.01-2.192 5.74-9.468.017L4.107 1.5l-1.654.062c-.51.019-.94.423-.953.936a.96.96 0 0 0 .993.99l.308-.011L7.5 16.04l12.109-.023 2.848-7.457.043-2.134-13.367.012zm8.288 13.359a.627.627 0 0 1 .468-.471.632.632 0 0 1 .288 1.231.632.632 0 0 1-.756-.76zm-9.462-.014a.627.627 0 0 1 .468-.47.632.632 0 0 1 .288 1.231.632.632 0 0 1-.756-.76zm7.803-.985h-4.9a2.54 2.54 0 0 0-2.333-1.414c-1.31.031-2.403 1.094-2.477 2.41A2.554 2.554 0 0 0 8.591 22.5a2.55 2.55 0 0 0 2.42-1.776h4.602a2.548 2.548 0 0 0 2.42 1.776 2.555 2.555 0 0 0 2.539-2.705c-.074-1.317-1.166-2.38-2.477-2.411a2.541 2.541 0 0 0-2.333 1.414z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-notification" viewBox="1.5 1.5 21 21">
        <path d="M12.053 22.5c-2.284 0-4.249-1.577-4.81-3.724L1.5 18.715l.019-3.772 1.953-.687-.021-3.18a8.527 8.527 0 0 1 5.756-8.094L9.182 1.5h5.773l-.013 1.455a8.376 8.376 0 0 1 5.722 7.98l.025 3.406 1.811.616v3.77l-10.49-.032a.959.959 0 0 1 .002-1.92h.004l8.568.027v-.47l-1.801-.613-.035-4.777c0-3.037-2.052-5.637-4.99-6.33l-.747-.176.01-1.016h-1.89l.017 1.027-.743.182a6.609 6.609 0 0 0-5.038 6.44l.03 4.545-1.97.693-.001.508 5.516.059.066.879a3.067 3.067 0 0 0 3.045 2.827c.777 0 1.517-.293 2.084-.825a.957.957 0 0 1 1.354.046.961.961 0 0 1-.045 1.357 4.945 4.945 0 0 1-3.393 1.342"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-search" viewBox="1.5 1.5 21 21">
        <path d="M22.288 20.948l-5.689-5.352a8.42 8.42 0 0 0 2.047-5.166c.213-4.707-3.457-8.708-8.181-8.921-4.725-.213-8.743 3.443-8.956 8.15-.214 4.706 3.456 8.708 8.181 8.92a8.654 8.654 0 0 0 1.737-.1l.172-.027a8.738 8.738 0 0 0 1.044-.268.947.947 0 0 0 .608-1.19.954.954 0 0 0-1.196-.606c-.23.076-.465.136-.7.184a6.664 6.664 0 0 1-1.58.123c-3.68-.166-6.54-3.284-6.374-6.951.167-3.666 3.297-6.515 6.978-6.35 3.68.167 6.54 3.285 6.373 6.95a6.608 6.608 0 0 1-2.142 4.59l-.747.688 7.007 6.607a.96.96 0 0 0 1.358-.017.95.95 0 0 0 .06-1.264"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.2, y=1.2, width=21.6, height=21.6 -->
    <symbol id="icon-search-bold" viewBox="1.2 1.2 21.6 21.6">
        <path d="M21.537 22.802h-.054a1.281 1.281 0 0 1-.822-.356l-7.239-6.825.984-.906a6.295 6.295 0 0 0 2.045-4.381 6.294 6.294 0 0 0-1.664-4.572 6.349 6.349 0 0 0-4.422-2.066 6.36 6.36 0 0 0-6.664 6.063 6.3 6.3 0 0 0 1.666 4.574 6.349 6.349 0 0 0 5.93 1.945 5.58 5.58 0 0 0 .666-.174 1.27 1.27 0 0 1 .44-.06 1.26 1.26 0 0 1 1.132.855 1.249 1.249 0 0 1-.8 1.572 9.053 9.053 0 0 1-1.08.278l-.183.027a8.834 8.834 0 0 1-7.945-2.766 8.76 8.76 0 0 1-2.318-6.363C1.431 4.775 5.6.974 10.478 1.21a8.834 8.834 0 0 1 6.151 2.872 8.762 8.762 0 0 1 2.316 6.363 8.714 8.714 0 0 1-1.935 5.127l5.51 5.189a1.248 1.248 0 0 1-.077 1.662 1.264 1.264 0 0 1-.906.378"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=9.75, y=3, width=4.5, height=18 -->
    <symbol id="icon-overflow" viewBox="9.75 3 4.5 18">
        <path d="M12 16.5a2.257 2.257 0 0 1 2.25 2.25A2.257 2.257 0 0 1 12 21a2.257 2.257 0 0 1-2.25-2.25A2.257 2.257 0 0 1 12 16.5zm0-2.25A2.257 2.257 0 0 1 9.75 12 2.257 2.257 0 0 1 12 9.75 2.257 2.257 0 0 1 14.25 12 2.257 2.257 0 0 1 12 14.25zm0-6.75a2.257 2.257 0 0 1-2.25-2.25A2.257 2.257 0 0 1 12 3a2.257 2.257 0 0 1 2.25 2.25A2.257 2.257 0 0 1 12 7.5z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-bids" viewBox="1.5 1.5 21 21">
        <path d="M7.829 16.79l.297.008 8.7-8.702-.004-.272-4.663-4.572-.242-.006-8.669 8.638v.328l4.58 4.579zm7.518-4.743L22.5 19.2l-3.28 3.278-7.153-7.152-3.218 3.218-1.77-.033L1.5 12.934l.001-1.776L11.196 1.5l1.699.027 5.673 5.562.031 1.705-3.252 3.253zm-1.236 1.236l-.809.808 5.918 5.917.808-.807-5.917-5.918zm-12.26 8.984V20.41h8.173v1.857H1.85zm7.555-8.58l1.235-1.236-3.065-3.065-1.236 1.236 3.066 3.065zm3.066-3.065l1.235-1.236-3.066-3.065-1.235 1.234 3.066 3.067z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-categories" viewBox="1.5 1.5 21 21">
        <path d="M17.793 8.753a2.561 2.561 0 0 1-2.547-2.546 2.562 2.562 0 0 1 2.547-2.548 2.562 2.562 0 0 1 2.548 2.548 2.561 2.561 0 0 1-2.548 2.546m0-7.253a4.72 4.72 0 0 0-4.706 4.707 4.72 4.72 0 0 0 4.706 4.706A4.72 4.72 0 0 0 22.5 6.207 4.72 4.72 0 0 0 17.793 1.5m0 18.84a2.561 2.561 0 0 1-2.547-2.547 2.562 2.562 0 0 1 2.547-2.547 2.562 2.562 0 0 1 2.548 2.547 2.561 2.561 0 0 1-2.548 2.547m0-7.254a4.722 4.722 0 0 0-4.706 4.707 4.72 4.72 0 0 0 4.706 4.707 4.72 4.72 0 0 0 4.707-4.707 4.722 4.722 0 0 0-4.707-4.707M6.207 20.34a2.561 2.561 0 0 1-2.548-2.547 2.562 2.562 0 0 1 2.548-2.547 2.562 2.562 0 0 1 2.547 2.547 2.561 2.561 0 0 1-2.547 2.547m0-7.254A4.722 4.722 0 0 0 1.5 17.793 4.72 4.72 0 0 0 6.207 22.5a4.72 4.72 0 0 0 4.706-4.707 4.722 4.722 0 0 0-4.706-4.707m0-4.333a2.561 2.561 0 0 1-2.548-2.546 2.562 2.562 0 0 1 2.548-2.548 2.562 2.562 0 0 1 2.547 2.548 2.561 2.561 0 0 1-2.547 2.546m0-7.253A4.72 4.72 0 0 0 1.5 6.207a4.72 4.72 0 0 0 4.707 4.706 4.72 4.72 0 0 0 4.706-4.706A4.72 4.72 0 0 0 6.207 1.5"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=6, y=1.5, width=13.37, height=21 -->
    <symbol id="icon-deals" viewBox="6 1.5 13.37 21">
        <path d="M6 14.385v-1.232l7.754-11.625 1.76-.028-.791 8.06h4.648v1.423L11.403 22.5H9.36l1.105-8.115H6zm6.893-3.166l.623-6.345-5.237 7.852h4.087l-.928 6.81L17.2 11.22h-4.307z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=3, y=1.5, width=18, height=21 -->
    <symbol id="icon-download" viewBox="3 1.5 18 21">
        <path d="M11.074 15.27V2.212c0-.757.512-1.113 1.024-1.113.511 0 1.023.36 1.023 1.113v13.06s5.247-5.51 5.73-5.995c.483-.484 1.066-.383 1.433 0 .366.384.494 1.006 0 1.499-.495.493-8.186 8.564-8.186 8.564s-7.801-8.167-8.186-8.564c-.385-.397-.358-1.124 0-1.499.358-.374 1.025-.423 1.432 0 .407.424 5.73 5.995 5.73 5.995zm-7.126 4.954H19.91c.524 0 .949.424.949.948v.38a.948.948 0 0 1-.949.948H3.948A.948.948 0 0 1 3 21.552v-.38c0-.524.425-.948.948-.948z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21 -->
    <symbol id="icon-event" viewBox="1.5 1.5 21 21">
        <path d="M9.2 1.5c-1.925 0-3.5 1.541-3.5 3.424 0 .77.265 1.48.707 2.054H2.2c-.367 0-.7.327-.7.685v4.109c0 .358.333.684.7.685h.7v9.358c0 .359.333.685.7.685h16.8c.367 0 .7-.326.7-.685v-9.358h.7c.367 0 .7-.327.7-.685V7.663c0-.358-.333-.685-.7-.685h-4.207a3.353 3.353 0 0 0 .707-2.054c0-1.883-1.575-3.424-3.5-3.424-1.142 0-2.16.55-2.8 1.384A3.532 3.532 0 0 0 9.2 1.5zm0 1.37c1.168 0 2.1.911 2.1 2.054v2.054H9.2c-1.168 0-2.1-.911-2.1-2.054 0-1.143.932-2.054 2.1-2.054zm5.6 0c1.168 0 2.1.911 2.1 2.054 0 1.143-.932 2.054-2.1 2.054h-2.1V4.924c0-1.143.932-2.054 2.1-2.054zM2.9 8.348h8.4v2.739H2.9v-2.74zm9.8 0h8.4v2.739h-8.4v-2.74zm-8.4 4.109h7v8.673h-7v-8.673zm8.4 0h7v8.673h-7v-8.673z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=21.12 -->
    <symbol id="icon-help" viewBox="1.5 1.5 21 21.12">
        <path d="M17.48 22.623H2.297a.803.803 0 0 1-.798-.808c0-.446.357-.807.798-.807h13.585v-2.062c0-.949-.555-1.806-1.414-2.186l-2.616-1.104a1.96 1.96 0 0 1-1.198-1.864c.013-.602.29-1.155.76-1.517 1.03-.793 1.464-2.095 1.131-3.396a3.098 3.098 0 0 0-3.012-2.317c-.87 0-1.685.342-2.298.964a3.14 3.14 0 0 0-.914 2.223c.002 1 .455 1.92 1.242 2.526.47.362.747.915.76 1.517a1.96 1.96 0 0 1-1.197 1.864L4.51 16.76a2.373 2.373 0 0 0-1.41 2.043.8.8 0 0 1-.844.757.804.804 0 0 1-.749-.854 3.98 3.98 0 0 1 2.372-3.43l2.633-1.11a.354.354 0 0 0 .216-.337.348.348 0 0 0-.13-.268 4.783 4.783 0 0 1-1.872-3.808 4.756 4.756 0 0 1 1.38-3.368 4.78 4.78 0 0 1 3.427-1.439 4.697 4.697 0 0 1 4.558 3.528c.49 1.914-.181 3.91-1.71 5.087a.348.348 0 0 0-.13.268.353.353 0 0 0 .216.336l2.633 1.111a4.001 4.001 0 0 1 2.38 3.67v3.677zM16.79 4.09c.566-.472 1.115-.233 1.115-.233.822.775 1.088 1.604 1.11 2.513.022.958-.244 1.994-1.11 2.744 0 0-.572.15-1.115-.224-.542-.375-.29-.998-.29-.998.345-.419.561-.941.568-1.422.006-.5-.21-.956-.568-1.39 0 0-.276-.517.29-.99zm2.226-2.33c.492-.421 1.167-.206 1.167-.206 1.652 1.48 2.335 3.252 2.316 5.085-.02 1.793-.704 3.647-2.316 5.038 0 0-.67.322-1.167-.178-.496-.5-.196-1-.196-1 2.316-2.3 2.316-5.582 0-7.766 0 0-.295-.553.196-.974z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=2.25, y=1.5, width=19.5, height=21 -->
    <symbol id="icon-profile" viewBox="2.25 1.5 19.5 21">
        <path d="M21.75 22.5H3.224a.967.967 0 0 1-.974-.96c0-.53.436-.959.974-.959h16.578v-2.449a2.832 2.832 0 0 0-1.725-2.597l-3.193-1.312a2.326 2.326 0 0 1-.535-4.016c1.258-.943 1.788-2.489 1.381-4.035-.426-1.62-1.938-2.753-3.676-2.753-1.06 0-2.056.407-2.804 1.145a3.681 3.681 0 0 0-1.115 2.642 3.735 3.735 0 0 0 1.516 3 2.327 2.327 0 0 1-.534 4.017l-3.194 1.312a2.822 2.822 0 0 0-1.72 2.426.968.968 0 0 1-1.03.9.965.965 0 0 1-.914-1.015c.11-1.796 1.218-3.357 2.894-4.074l.013-.006 3.2-1.314a.42.42 0 0 0 .106-.717A5.631 5.631 0 0 1 6.187 7.21 5.574 5.574 0 0 1 7.87 3.209 5.914 5.914 0 0 1 12.054 1.5c2.626 0 4.913 1.724 5.562 4.191a5.703 5.703 0 0 1-2.087 6.043.42.42 0 0 0 .105.718l3.213 1.32a4.75 4.75 0 0 1 2.903 4.36V22.5z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=20.53 -->
    <symbol id="icon-purchases" viewBox="1.5 1.5 21 20.53">
        <path d="M21.975 3.62c.327.408.525.921.525 1.493v14.583a2.34 2.34 0 0 1-2.333 2.333H3.833A2.333 2.333 0 0 1 1.5 19.696V5.113c0-.572.198-1.085.537-1.494l1.35-1.477A1.693 1.693 0 0 1 4.73 1.5h14a1.76 1.76 0 0 1 1.354.63l1.892 1.49zM3.25 5.357V19.28a1 1 0 0 0 1 1h15.5a1 1 0 0 0 1-1V5.36H3.25zm.583-1.525l1.132-1.166H18.9l1.5 1.167H3.833zM5 9.433v-2.1h4.667v2.1H5z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.5, width=21, height=20.53 -->
    <symbol id="icon-selling" viewBox="1.5 1.5 21 20.53">
        <path d="M13.718 22.38l-2.187-.048a.955.955 0 0 1-.937-.973.956.956 0 0 1 .98-.93l1.422.03 7.59-6.84v-.883l-8.996-9.33-6.801-.001-1.37 1.366.015 6.781L9.85 18.23a.948.948 0 0 1-.032 1.346.963.963 0 0 1-1.355-.03l-6.946-7.229-.018-8.33L3.993 1.5l8.415.003L22.503 11.97v2.49l-8.785 7.919zm-6.313-8.56L6.07 12.455l6.41-6.19 1.336 1.366-6.41 6.19zm3.21 3.259L9.28 15.713l6.41-6.19 1.336 1.366-6.41 6.19zm-2.4-10.16c0 .75-.613 1.358-1.368 1.358a1.363 1.363 0 0 1-1.368-1.359c0-.75.613-1.359 1.368-1.359.755 0 1.368.609 1.368 1.36z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=1.2, width=21, height=21.54 -->
    <symbol id="icon-settings" viewBox="1.5 1.2 21 21.54">
        <path d="M21.981 13.87c.533.421.672 1.164.337 1.776l-1.965 3.4a1.373 1.373 0 0 1-1.715.616l-2.01-.807a8.44 8.44 0 0 1-.977.571l-.305 2.12a1.37 1.37 0 0 1-1.366 1.194h-3.952c-.69 0-1.281-.506-1.365-1.178l-.306-2.135a8.076 8.076 0 0 1-.982-.57l-2.033.816c-.628.228-1.356-.02-1.677-.608l-1.987-3.438a1.388 1.388 0 0 1 .352-1.759l1.697-1.327a7.266 7.266 0 0 1 0-1.142l-1.7-1.33a1.374 1.374 0 0 1-.338-1.775l1.965-3.4a1.373 1.373 0 0 1 1.715-.616l2.01.807a8.44 8.44 0 0 1 .978-.571l.304-2.12A1.37 1.37 0 0 1 10.028 1.2h3.952c.69 0 1.28.506 1.364 1.178l.306 2.135c.339.165.666.356.983.57l2.033-.816c.628-.228 1.356.02 1.676.608l1.987 3.438a1.388 1.388 0 0 1-.351 1.759l-1.698 1.327a7.19 7.19 0 0 1 0 1.142l1.701 1.33zm-3.179 4.305l.009-.015a.326.326 0 0 0-.009.015zm-5.218 3.135l.002-.015-.002.015zm-3.158.015a.444.444 0 0 0-.002-.015l.002.015zm-5.21-3.131a.46.46 0 0 0-.012-.02l.012.02zM3.225 9.19a.402.402 0 0 0 .003-.006l-.003.006zm15.567-3.445a.46.46 0 0 0 .011.02l-.011-.02zm1.815 9.308L18.4 13.328l.063-.5c.042-.338.062-.599.062-.858 0-.26-.02-.52-.062-.858l-.063-.5.397-.31 1.81-1.416-1.634-2.826-2.603 1.045-.403-.31a6.329 6.329 0 0 0-1.465-.85l-.47-.192-.073-.504-.325-2.27h-3.26l-.398 2.774-.47.192a6.69 6.69 0 0 0-1.474.857l-.4.3-.465-.186-2.132-.856L3.4 8.886l2.206 1.726-.062.5a6.893 6.893 0 0 0-.063.858c0 .253.021.527.063.858l.062.5-.397.31-1.81 1.416 1.634 2.826 2.604-1.045.402.31a6.37 6.37 0 0 0 1.465.85l.471.192.072.504.326 2.27h3.26l.397-2.774.471-.192a6.69 6.69 0 0 0 1.474-.857l.4-.3.465.186 2.132.856 1.634-2.826zm-8.603-.515a2.573 2.573 0 0 0 2.569-2.569 2.573 2.573 0 0 0-2.57-2.569 2.573 2.573 0 0 0-2.568 2.569 2.573 2.573 0 0 0 2.569 2.569zm0 1.779a4.351 4.351 0 0 1-4.348-4.348 4.351 4.351 0 0 1 4.348-4.348 4.351 4.351 0 0 1 4.347 4.348 4.351 4.351 0 0 1-4.347 4.348z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=5.25, width=21, height=12.5 -->
    <symbol id="icon-watch" viewBox="1.5 5.25 21 12.5">
        <path d="M14.744 16.177c-1.226 0-2.223-1.015-2.223-2.262s.997-2.262 2.223-2.262 2.224 1.015 2.224 2.262-.998 2.262-2.224 2.262m-9.452 0c-1.226 0-2.224-1.015-2.224-2.262s.998-2.262 2.224-2.262c1.225 0 2.223 1.015 2.223 2.262s-.998 2.262-2.223 2.262M21.958 5.434c-.775-.251-2.572-.184-3.164 1.636l-.283.872-.004.012-.027.083.003.001a1.54 1.54 0 0 0-.024.122l-.855 3.268c-.695-.816-1.712-1.344-2.86-1.344a3.778 3.778 0 0 0-3.171 1.74h-3.11a3.777 3.777 0 0 0-3.171-1.74c-.468 0-.91.097-1.325.254l.6-2.112.242-.747c.285-.88 1.18-.632 1.187-.63a.783.783 0 0 0 .988-.504.783.783 0 0 0-.503-.988c-.777-.253-2.572-.184-3.164 1.636L2.759 8.71l.036.012-1.176 4.149c-.018.06-.011.12-.014.18a3.86 3.86 0 0 0-.105.864c0 2.113 1.7 3.831 3.792 3.831 2.09 0 3.792-1.718 3.792-3.83 0-.18-.03-.35-.053-.522h1.973c-.024.172-.052.342-.052.521 0 2.113 1.702 3.831 3.792 3.831 2.008 0 3.641-1.59 3.769-3.586l1.533-5.867.24-.738c.286-.878 1.18-.63 1.187-.629a.784.784 0 1 0 .485-1.492"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=2.5, width=21, height=19.5 -->
    <symbol id="icon-save" viewBox="1.5 2.5 21 20">
        <path d="M16.725 2.25c-1.827 0-3.58.86-4.725 2.221-1.145-1.36-2.898-2.221-4.725-2.221C4.041 2.25 1.5 4.822 1.5 8.095c0 4.017 3.57 7.29 8.977 12.263L12 21.75l1.523-1.403C18.93 15.385 22.5 12.112 22.5 8.095c0-3.273-2.541-5.845-5.775-5.845zm-4.62 16.525L12 18.88l-.105-.106C6.897 14.195 3.6 11.165 3.6 8.095c0-2.126 1.575-3.72 3.675-3.72 1.617 0 3.192 1.052 3.748 2.508h1.964c.546-1.456 2.121-2.508 3.738-2.508 2.1 0 3.675 1.594 3.675 3.72 0 3.07-3.297 6.1-8.295 10.68z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.2, y=1.95, width=21.6, height=20.21 -->
    <symbol id="icon-save-bold" viewBox="1.2 1.95 22 21">
        <path d="M7.275 4.675c-1.924 0-3.375 1.47-3.375 3.419 0 2.925 3.219 5.893 8.1 10.37 4.881-4.475 8.099-7.444 8.099-10.37 0-1.949-1.45-3.419-3.374-3.419-1.5 0-2.954.972-3.458 2.313l-.072.195h-2.379l-.073-.193c-.513-1.341-1.971-2.315-3.468-2.315zM12 22.156l-1.725-1.578C4.793 15.537 1.2 12.234 1.2 8.094c0-3.446 2.669-6.144 6.075-6.144 1.763 0 3.502.768 4.725 2.07 1.221-1.302 2.963-2.07 4.725-2.07 3.406 0 6.075 2.698 6.075 6.144 0 4.146-3.605 7.455-9.062 12.46L12 22.156z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.2, y=1.95, width=21.6, height=20.21 -->
    <symbol id="icon-save-selected" viewBox="1.2 1.95 22 21">
        <path d="M12 22.156l-1.725-1.578C4.793 15.537 1.2 12.234 1.2 8.094c0-3.446 2.669-6.144 6.075-6.144 1.763 0 3.502.768 4.725 2.07 1.221-1.302 2.963-2.07 4.725-2.07 3.406 0 6.075 2.698 6.075 6.144 0 4.146-3.605 7.455-9.062 12.46L12 22.156z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.5, y=3, width=21, height=18 -->
    <symbol id="icon-camera" viewBox="1.5 3 21 18">
        <path d="M12 9.387c-1.82 0-3.3 1.432-3.3 3.194 0 1.76 1.48 3.193 3.3 3.193 1.82 0 3.3-1.433 3.3-3.193 0-1.762-1.48-3.194-3.3-3.194zm0 8.13c-2.812 0-5.1-2.215-5.1-4.936 0-2.722 2.288-4.936 5.1-4.936 2.813 0 5.1 2.214 5.1 4.936 0 2.72-2.287 4.935-5.1 4.935zM4.32 6.546c-.563 0-1.02.421-1.02.937v10.838c0 .516.457.936 1.02.936h15.36c.563 0 1.02-.42 1.02-.936V7.484c0-.516-.457-.936-1.02-.936h-3.246l-1.919-1.806h-5.03l-1.92 1.806H4.32zM19.68 21H4.32c-1.555 0-2.82-1.202-2.82-2.678V7.484c0-1.477 1.265-2.678 2.82-2.678h2.515L8.755 3h6.491l1.92 1.806h2.514c1.555 0 2.82 1.2 2.82 2.678v10.838c0 1.476-1.265 2.678-2.82 2.678z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=4.27, y=1.5, width=15.47, height=21 -->
    <symbol id="icon-mic" viewBox="4.27 1.5 15.47 21">
        <path d="M17.87 11.447c0 3.316-2.808 5.637-5.858 5.637s-5.858-2.32-5.858-5.637H4.275c0 3.77 3.006 6.886 6.632 7.428V22.5h2.21v-3.625c3.625-.542 6.632-3.659 6.632-7.428h-1.88zm-7.184-6.742c0-.73.596-1.326 1.326-1.326.73 0 1.326.597 1.326 1.326l-.01 6.853a1.32 1.32 0 0 1-1.316 1.326 1.33 1.33 0 0 1-1.326-1.326V4.705zm1.326 10.058a3.316 3.316 0 0 0 3.316-3.316V4.816a3.316 3.316 0 1 0-6.632 0v6.631a3.316 3.316 0 0 0 3.316 3.316z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1, y=1, width=22, height=22 -->
    <symbol id="icon-clear" viewBox="1 1 22 22">
        <path d="M12 10.542L8.575 7.117a1 1 0 0 0-1.414 0l-.044.044a1 1 0 0 0 0 1.414L10.542 12l-3.425 3.425a1 1 0 0 0 0 1.414l.044.044a1 1 0 0 0 1.414 0L12 13.458l3.425 3.425a1 1 0 0 0 1.414 0l.044-.044a1 1 0 0 0 0-1.414L13.458 12l3.425-3.425a1 1 0 0 0 0-1.414l-.044-.044a1 1 0 0 0-1.414 0L12 10.542zM12 23C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11z"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=4.65, y=2.1, width=14.7, height=19.96 -->
    <symbol id="icon-top-seller" viewBox="4.65 2.1 14.7 19.96">
        <path d="M13.986 19.084h-.993v-3.079L12 15.012l-.993.993v3.08h-.993a1.986 1.986 0 0 0-1.987 1.986v.993h7.946v-.993a1.986 1.986 0 0 0-1.987-1.987m1.192-8.343l1.39 5.264L12 12.231l-4.569 3.774 1.39-5.164L4.65 7.364l5.364-.298L12 2.1l1.986 4.966 5.364.298-4.172 3.377"/>
    </symbol>
    <!-- canvas: width=24, height=24 -->
    <!-- asset: x=1.33, y=4, width=21.33, height=16 -->
    <symbol id="icon-fast-n-free" viewBox="1.33 4 21.33 16">
        <path d="M19.758 8h-2.91V4H3.273c-1.067 0-1.94.9-1.94 2v11h1.94c0 1.66 1.3 3 2.909 3 1.61 0 2.909-1.34 2.909-3h5.818c0 1.66 1.3 3 2.91 3 1.609 0 2.908-1.34 2.908-3h1.94v-5l-2.91-4zM6.182 18.5c-.805 0-1.455-.67-1.455-1.5s.65-1.5 1.455-1.5 1.454.67 1.454 1.5-.65 1.5-1.454 1.5zm13.09-9l1.901 2.5h-4.325V9.5h2.425zm-1.454 9c-.805 0-1.454-.67-1.454-1.5s.65-1.5 1.454-1.5c.805 0 1.455.67 1.455 1.5s-.65 1.5-1.455 1.5z"/>
    </symbol>
</svg>
    

<span class="textbox">
    <input class="textbox__control" type="text" placeholder="placeholder text" />
</span>
    

<span class="textbox">
    <input class="textbox__control" type="text" placeholder="placeholder text" disabled />
</span>
    

<span class="textbox">
    <input class="textbox__control" type="text" placeholder="placeholder text" aria-invalid="true" />
</span>
    

<span class="textbox">
    <textarea class="textbox__control" placeholder="placeholder text"></textarea>
</span>
    

<div class="textbox">
    <input class="textbox__control textbox__control--fluid" type="text" placeholder="placeholder text" />
</div>
    

<span class="textbox">
    <svg aria-hidden="true" class="textbox__icon" focusable="false" width="16" height="16">
        <use xlink:href="#icon-messages"></use>
    </svg>
    <input class="textbox__control" type="text" placeholder="placeholder text" />
</span>
    

<span class="textbox textbox--icon-end">
    <input class="textbox__control" type="text" placeholder="placeholder text" />
    <svg aria-hidden="true" class="textbox__icon" focusable="false" width="16" height="16">
        <use xlink:href="#icon-messages"></use>
    </svg>
</span>
    

<span class="textbox">
    <input class="textbox__control textbox__control--underline" type="text" placeholder="placeholder text" />
</span>