svg.svg-icon__sprite
   defs
       symbol#dot(viewbox='0 0 32 32')
           title Dit icon.
           desc For interactions.
           circle(cx='16' cy='16' r='14' fill='none' stroke-width='3')
           circle(cx='16' cy='16' r='4' fill='none' stroke-width='3')
       symbol#arrow(viewbox='0 0 32 32')
           title Arrow icon.
           desc For interactions.
           path(d='M12.8 3c.4 0 .8.2 1.1.5s.5.7.5 1.1c0 .5-.2.8-.5 1.1l-8.5 8.5h24.9c.4 0 .8.2 1.1.5.3.3.5.7.5 1.1s-.2.8-.5 1.1c-.3.3-.7.5-1.1.5H5.5l8.5 8.5c.3.3.5.7.5 1.1 0 .4-.2.8-.5 1.1s-.7.5-1.1.5c-.4 0-.8-.2-1.1-.5L.5 17c-.3-.3-.5-.7-.5-1.1s.2-.8.5-1.1L11.7 3.5c.3-.3.7-.5 1.1-.5z')
       symbol#eye(viewbox='0 0 32 32')
           title Eye icon.
           desc For toggleable elements.
           path(d='M16 4c1.5 0 2.9.2 4.2.7 1.4.4 2.6 1 3.6 1.7s2 1.5 2.9 2.3 1.7 1.7 2.3 2.6 1.2 1.6 1.6 2.3c.5.7.8 1.3 1 1.7l.4.7c0 .1-.1.2-.2.4s-.3.5-.6 1.1-.6 1.1-1 1.6-.8 1.2-1.4 1.9c-.6.7-1.2 1.4-1.8 2s-1.3 1.2-2.2 1.9c-.8.6-1.7 1.2-2.6 1.6s-1.9.8-3 1.1c-.9.3-2.1.4-3.2.4-1.5 0-2.9-.2-4.2-.7s-2.6-1-3.6-1.7-2-1.5-2.9-2.3-1.7-1.7-2.3-2.5-1.2-1.6-1.6-2.3-.8-1.3-1-1.7l-.4-.7c0-.1.1-.2.2-.4s.3-.5.6-1.1.6-1.1 1-1.6.8-1.2 1.4-1.9 1.2-1.4 1.8-2 1.3-1.2 2.2-1.9S8.8 6 9.7 5.5c.9-.4 1.9-.8 3-1.1S14.9 4 16 4zm0 2.7c-1 0-1.9.1-2.9.4s-1.8.6-2.5 1c-.8.4-1.5.8-2.2 1.4-.7.6-1.3 1.1-1.9 1.7S5.5 12.4 5 13s-.9 1.2-1.2 1.7c-.3.5-.6.9-.8 1.4.3.5.5.9.8 1.4s.7 1 1.2 1.6l1.5 1.8s1.1 1.1 1.9 1.7c.7.6 1.5 1.1 2.2 1.5.8.4 1.6.7 2.5 1s1.9.4 2.9.4 1.9-.1 2.9-.4c.9-.3 1.8-.6 2.5-1s1.5-.9 2.2-1.5c.7-.6 1.3-1.1 1.9-1.7l1.5-1.8 1.2-1.6c.3-.5.6-.9.8-1.4-.3-.5-.5-.9-.8-1.4-.3-.5-.7-1-1.2-1.6l-1.5-1.8c-.5-.6-1.1-1.1-1.9-1.7-.7-.6-1.5-1.1-2.2-1.5-.8-.4-1.6-.7-2.5-1S17 6.7 16 6.7zm0 4c1.5 0 2.7.5 3.8 1.6 1 1 1.6 2.3 1.6 3.8s-.5 2.7-1.6 3.8c-1 1-2.3 1.6-3.8 1.6s-2.7-.5-3.8-1.6c-1-1-1.6-2.3-1.6-3.8s.5-2.7 1.6-3.8 2.3-1.6 3.8-1.6zm0 2.6c-.7 0-1.4.3-1.9.8s-.8 1.1-.8 1.9.3 1.4.8 1.9 1.1.8 1.9.8 1.4-.3 1.9-.8.8-1.1.8-1.9-.3-1.4-.8-1.9-1.2-.8-1.9-.8z')
       symbol#firefox(viewbox='0 0 32 32')
           title Firefox icon.
           desc Support for this browser.
           path(d='M31.8 10.6l-.4 2.4s-.5-4.4-1.2-6c-1-2.5-1.4-2.5-1.4-2.5.7 1.7.5 2.6.5 2.6S28.1 3.9 25 2.9c-3.4-1.1-5.3-.8-5.5-.8h-.1.1s3.8.7 4.5 1.6c0 0-1.6 0-3.2.5-.1 0 5.9.7 7.1 6.7 0 0-.7-1.4-1.5-1.6.5 1.6.4 4.7-.1 6.2-.1.2-.1-.8-1.1-1.3.3 2.3 0 5.9-1.6 6.9-.1.1 1-3.6.2-2.2-4.4 6.8-9.6 3.1-12 1.5 1.2.3 3.5 0 4.5-.8 1.1-.8 1.7-1.3 2.3-1.2.6.1 1-.5.5-1s-1.6-1.2-3-.8c-1.1.3-2.4 1.4-4.3.3-1.5-.9-1.7-1.7-1.7-2.2 0-.2.1-.4.1-.5.2-.5.7-.6 1-.8.5.1.9.2 1.4.5v-.6c0-.1 0-.3-.1-.7 0-.3-.1-.6-.2-.9 0-.1.4-.4.8-.7.4-.3.8-.5 1.2-.8.5-.2.7-.3.7-.4l.1-.1c.2-.1.4-.4.5-.9v-.1-.2-.1c-.1-.1-.3-.2-1.1-.2h-1.4c-1 0-1.6-1-1.8-1.4.2-1.4 1-2.4 2.1-3 .2-.1-2.8 0-4.2 1.8-1.1-.4-2.2-.4-3.1-.2-.2 0-.4 0-.7-.1-.6-.5-1.5-1.6-1.6-2.8 0 0-1.9 1.4-1.6 5.4v.2c-.5.6-.7 1.2-.7 1.3-.5.9-.9 2.3-1.3 4.4 0 0 .3-.8.8-1.8-.4 1.2-.7 3-.5 5.8 0 0 0-.6.2-1.5.1 1.7.7 3.8 2.1 6.3 2.8 4.7 7 7.1 11.7 7.5.8.1 1.7.1 2.5 0h.2c1-.1 1.9-.2 2.9-.4 13.1-3.2 11.7-19.1 11.7-19.1z')
       symbol#chrome(viewbox='0 0 32 32')
           title Chrome icon.
           desc Support for this browser.
           path(d='M8.2 14.1L3.7 6.3c2.9-3.6 7.4-6 12.4-6C21.9.3 27 3.4 29.7 8.1H16.1c-3.8 0-7 2.5-7.9 6zm13.6-3.7h9.1c.7 1.8 1.1 3.7 1.1 5.8 0 8.7-7 15.7-15.7 15.8l6.5-11.2c.9-1.3 1.4-2.9 1.4-4.6 0-2.3-.9-4.3-2.4-5.8zm-11.5 5.8c0-3.2 2.6-5.8 5.8-5.8s5.8 2.6 5.8 5.8-2.6 5.8-5.8 5.8-5.8-2.7-5.8-5.8zm8 7.8l-4.5 7.9C6.1 30.7.2 24.1.2 16.2c0-2.8.7-5.5 2-7.8l6.5 11.2c1.3 2.8 4.1 4.7 7.3 4.7.8 0 1.6-.1 2.3-.3z')
       symbol#safari(viewbox='0 0 32 32')
           title Safari icon.
           desc Support for this browser.
           path(d='M16.1.3C7.3.3.2 7.4.2 16.2S7.3 32 16.1 32s15.8-7.1 15.8-15.8S24.8.3 16.1.3zM29.9 15v-.3.3zm-2.2-6.4l-.2-.3c.1.1.2.2.2.3zm-.8-1.1l-.1-.2s0 .1.1.2zm-2-2l-.2-.1c.1 0 .2.1.2.1zm-1-.8l-.3-.2c.1.1.2.2.3.2zm-6.3-2.3h-.3.3zm-2.7 0h-.3.3zM8.6 4.5l-.4.2c.1 0 .2-.1.4-.2zm-1.2.9l-.2.1c.1 0 .1-.1.2-.1zm-2 1.9l-.1.2c0-.1.1-.1.1-.2zm-.7 1l-.3.3.3-.3zm-2.4 6.3v0zm0 2.8v0zm2.1 6.3l.3.3-.3-.3zm.3.4l2.5-1.7-.3-.4-2.5 1.7C3.3 22 2.5 20 2.3 17.8l1.5-.1v-.5l-1.5.1v-.9h3v-.5h-3V15l1.5.1v-.5l-1.5-.1c.2-2.2 1-4.2 2.1-5.9l2.5 1.7.3-.4-2.5-1.6c.2-.3.3-.5.5-.7l1.1.9.3-.4-1.1-.9c.2-.2.4-.5.6-.7l2.1 2.1.4-.4-2.1-2 .6-.6.9 1.2.4-.3-.9-1.2c.2-.2.5-.4.7-.5l1.7 2.5.3-.3-1.6-2.5c1.7-1.1 3.7-1.9 5.9-2.1l.1 1.5h.5L15 2.3h.9v3h.5v-3h.9l-.1 1.5h.5l.1-1.5c2.2.2 4.2 1 5.9 2.1L21.9 7l.4.3L24 4.8c.2.2.5.3.7.5l-.9 1.1.4.3.9-1.1.6.6-.8.8-10.8 7.2L6.9 25l-.8.8-.6-.6 1.1-.9-.3-.4-1.1.9c-.2-.3-.3-.5-.5-.7zm.7.9c0-.1-.1-.1-.1-.2l.1.2zm1.8 1.8l.2.2-.2-.2zm1 .8l.3.2c-.1-.1-.2-.1-.3-.2zm6.3 2.3h.3c0 .1-.2.1-.3 0zm2.8.1h.3-.3zm6.3-2.2l.3-.2c-.1.1-.2.1-.3.2zm1.2-.8l.2-.1c-.1 0-.2 0-.2.1zm1.1-1zm.8-1l.1-.2c0 .1 0 .2-.1.2zm.3-.2l-1.1-.9-.3.4 1.1.9-.6.6-2.1-2.1-.4.4 2.1 2.1-.6.6-.9-1.2-.4.3.9 1.1c-.2.2-.5.4-.7.5L22.3 25l-.4.3 1.7 2.5c-1.7 1.1-3.7 1.9-5.9 2.1l-.1-1.5h-.5l.1 1.5h-.9v-3h-.5v3h-.9l.1-1.5h-.5l-.1 1.5c-2.2-.2-4.2-1-5.9-2.1l1.7-2.5-.4-.3-1.6 2.5c-.2-.2-.5-.3-.7-.5l.9-1.1-.4-.3-.9 1.1-.6-.6.8-.8 10.8-7.2 7.2-10.8.8-.8.6.6-1.1.9.3.4 1.1-.8c.2.2.4.5.5.7L25 9.9l.3.4 2.5-1.7c1.1 1.7 1.9 3.7 2.1 5.9l-1.5.1v.5l1.5-.1v.9h-3v.5h3v.9l-1.5-.1v.5l1.5.1c-.2 2.2-1 4.2-2.1 5.9L25.3 22l-.3.4 2.5 1.7c-.2.2-.4.4-.5.7zm2.9-7.4v.3-.3zm-2.2 6.3c-.1.1-.1.2-.2.3l.2-.3z')
       symbol#edge(viewbox='0 0 32 32')
           title Edge icon.
           desc Support for this browser.
           path(d='M1.7 13.9C2.7 6.7 7.6.1 16.5 0c5.4.1 9.8 2.5 12.4 7.2 1.3 2.4 1.7 5 1.8 7.8v3.3H11c.1 8.1 12 7.8 17.1 4.3v6.6c-3 1.8-9.8 3.4-15 1.3-4.5-1.7-7.7-6.4-7.6-10.9-.3-5.9 2.8-9.8 7.5-12-1 1.2-1.8 2.6-2.2 5H22S22.7 6 15.7 6c-6.6.2-11.3 4-14 7.9z')
       symbol#explorer(viewbox='0 0 32 32')
           title iExplorer icon.
           desc Support for this browser.
           path(d='M23.8 17.5H31c.1-.5.1-1 .1-1.5 0-2.5-.7-4.8-1.8-6.8 1.2-3.2 1.1-5.9-.4-7.5-1.5-1.5-5.6-1.3-10.2.8h-1C11.3 2.5 6 6.9 4.6 12.7c2-2.5 4.1-4.4 6.9-5.7-.3.2-1.7 1.7-2 2-7.3 7.3-9.7 16.9-7.2 19.4 1.9 1.9 5.3 1.6 9.3-.4 1.8.9 3.9 1.5 6.1 1.5 5.9 0 10.9-3.8 12.8-9.1h-7.3c-1 1.9-3 3.1-5.2 3.1s-4.2-1.3-5.2-3.1c-.4-.8-.7-1.8-.7-2.8l11.7-.1zM12 14c.2-3 2.6-5.4 5.7-5.4s5.5 2.4 5.7 5.4H12zM28.8 3.3c1 1 1 3 .1 5.3-1.5-2.3-3.7-4.1-6.3-5.1 2.8-1.2 5.1-1.4 6.2-.2zM4.2 27.9c-1.3-1.3-.9-4.1.8-7.4 1.1 3 3.1 5.4 5.7 7-2.9 1.4-5.3 1.6-6.5.4z')

main.flexy__item.flexy--items-center.flexy--justify-center.flexy--column
    section.section.flexy__item.flexy--column.flexy--items-center.space--big
        header.header.accessible-hide
            h2 CSS Dropdown
        article.section__article.flexy__item.flexy--column.flexy--items-center
            header.header.accessible-hide
                h3 A Sassy-Select emulation.
            form
                      fieldset.dropdown
                          input.dropdown__trigger(type='text' readonly value='Select an option' id='dropdown__trigger')
                          input.dropdown__list__radio(type='radio' id='option-null' disabled checked name='radio-group' value='null')
                          label.dropdown__list__item.dropdown__list__item--title.flexy__child.flexy__item.flexy--items-center(for='option-null') Select a product
                          .dropdown__trigger__icon.flexy__item.flexy--items-center
                              svg(class='svg-icon stroke--white')
                                  use.use(xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#dot')
                          ul.dropdown__list
                              - var n = 1
                              while n < 10
                                  - randomNumber = Math.floor(Math.random() * 137) + 28
                                  li.flexy__item
                                      input.dropdown__list__radio(type='radio' id='option-#{n}' name='radio-group' value='value_#{n}')
                                      label.dropdown__list__item.flexy__child.flexy__item.flexy--items-center.flexy--between(for='option-#{n}') Product #{n}
                                          span.dropdown__list__item--amount #{randomNumber} €
                                  - n++
    header.header
        h1
          a(href='http://tadaima.studio' title='Go to Tadaima')
            svg.logo-tadaima.fill--white(xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 80 80')
              title Tadaima Studio.
              desc A group of digital interface crafters.
              //- path.st5(d='M172.5,30.6c0-1.5,1.2-2.6,2.6-2.6c1.4,0,2.6,1.1,2.6,2.6c0,1.4-1.2,2.5-2.6,2.5                                C173.7,33.1,172.5,32,172.5,30.6z M105.9,51.4c-1.7,0.5-2.6,0.7-3.9,0.7c-3.7,0-6.1-2.5-6.1-6.6v-6.2H92v-3.5h3.9v-4.9h3.8v4.9h5.6                                v3.5h-5.6v6.2c0,2.1,1.1,3,3,3c0.9,0,1.8-0.2,2.6-0.4L105.9,51.4z M123.9,48h2.5v3.5h-6.4v-1.1c-1.3,0.9-2.9,1.5-4.8,1.5                                c-4.4,0-7.9-3.7-7.9-8.2c0-4.6,3.5-8.3,7.9-8.3c1.9,0,3.5,0.5,4.8,1.5v-1.1h6.4v3.5h-2.5V48z M120.1,46.8v-6.2                                c-1.4-1.3-2.8-1.8-4.3-1.8c-2.7,0-4.7,2.3-4.7,4.9c0,2.6,2,4.9,4.7,4.9C117.3,48.6,118.7,48.1,120.1,46.8z M147.6,51.6h-6.4v-1.1                                c-1.3,1-2.9,1.5-4.8,1.5c-4.4,0-7.9-3.7-7.9-8.3c0-4.6,3.5-8.2,7.9-8.2c1.9,0,3.5,0.5,4.8,1.5v-5.5h-2.5v-3.5h6.4V48h2.5V51.6z                                M141.2,46.8v-6c-1.4-1.5-2.8-2-4.3-2c-2.7,0-4.7,2.3-4.7,4.9c0,2.6,2,4.9,4.7,4.9C138.5,48.6,139.9,48.1,141.2,46.8z M166.2,48h2.5                                v3.5h-6.4v-1.1c-1.3,0.9-2.9,1.5-4.8,1.5c-4.4,0-7.9-3.7-7.9-8.2c0-4.6,3.5-8.3,7.9-8.3c1.9,0,3.5,0.5,4.8,1.5v-1.1h6.4v3.5h-2.5V48                                z M162.4,46.8v-6.2c-1.4-1.3-2.8-1.8-4.3-1.8c-2.7,0-4.7,2.3-4.7,4.9c0,2.6,2,4.9,4.7,4.9C159.6,48.6,161,48.1,162.4,46.8z                                M179.7,51.6h-8.9V48h2.5v-8.7h-2.5v-3.5h6.3V48h2.6V51.6z M212.7,51.6h-8.9V48h2.5v-4.9c0-2.8-1.4-4.3-3.8-4.3                                c-1.2,0-2.5,0.6-3.6,2.2c0.1,0.6,0.2,1.2,0.2,1.9V48h2.5v3.5h-8.9V48h2.5v-4.9c0-2.8-1.4-4.3-3.8-4.3c-1.1,0-2.4,0.6-3.4,2.1V48h2.6                                v3.5h-8.9V48h2.5v-8.7h-2.5v-3.5h6.3v1.1c1.1-1,2.2-1.6,4.2-1.6c2.1,0,3.9,0.9,5.2,2.4c1.7-1.6,3.3-2.4,5.9-2.4c3.8,0,6.8,3,6.8,7.6                                V48h2.6V51.6z M231.4,48h2.5v3.5h-6.4v-1.1c-1.3,0.9-2.9,1.5-4.8,1.5c-4.4,0-7.9-3.7-7.9-8.2c0-4.6,3.5-8.3,7.9-8.3                                c1.9,0,3.5,0.5,4.8,1.5v-1.1h6.4v3.5h-2.5V48z M227.5,46.8v-6.2c-1.4-1.3-2.8-1.8-4.3-1.8c-2.7,0-4.7,2.3-4.7,4.9                                c0,2.6,2,4.9,4.7,4.9C224.8,48.6,226.2,48.1,227.5,46.8z')
              g
                rect.st5(y='0', width='80', height='80')
              lineargradient#SVGID_1_(gradientunits='userSpaceOnUse', x1='27.7468', y1='18.248', x2='52.244', y2='42.7452')
                stop(offset='0', style='stop-color:#FF5572')
                stop(offset='1', style='stop-color:#FF7555')
              polyline.logo-tadaima--animated(style='fill:none;stroke:url(#SVGID_1_);stroke-width:2;stroke-miterlimit:10;', points='52,27 25,27 25,23 55,23 55,31                                 40,31 40,54 ')
              lineargradient#SVGID_2_(gradientunits='userSpaceOnUse', x1='23.9948', y1='30.0043', x2='48.4901', y2='54.4996')
                stop(offset='0', style='stop-color:#FF5572')
                stop(offset='1', style='stop-color:#FF7555')
              polyline.logo-tadaima--animated(style='fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10;', points='24,31 36,31 36,57 44,57 44,34 ')

svg.svg-bg(xmlns='http://www.w3.org/2000/svg')
  defs
    circle#a(cx='1468', cy='133', r='35')
    mask#h(x='0', y='0', width='70', height='70', fill='#fff')
      use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#a')
    circle#b(cx='236.5', cy='732.5', r='23.5')
    mask#i(x='0', y='0', width='47', height='47', fill='#fff')
      use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#b')
    circle#c(cx='1120.5', cy='945.5', r='28.5')
    mask#j(x='0', y='0', width='57', height='57', fill='#fff')
      use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#c')
    path#d(d='M1193.375 302.875l44.6 77.25h-89.2z')
    mask#k(x='0', y='0', width='89.201', height='77.25', fill='#fff')
      use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#d')
    path#e(d='M1610.8 513.3l34.14 59.128h-68.278z')
    mask#l(x='0', y='0', width='68.277', height='59.13', fill='#fff')
      use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#e')
    path#f(d='M51.045 967.864l38.314 66.362H12.73z')
    mask#m(x='0', y='0', width='76.629', height='66.362', fill='#fff')
      use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#f')
    path#g(d='M46.045 311.097l26.5 45.897H19.546z')
    mask#n(x='0', y='0', width='52.997', height='45.897', fill='#fff')
      use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#g')
  g(style='mix-blend-mode:overlay', fill='none', fill-rule='evenodd', opacity='.35', stroke='#FFF')
    use.svg-bg_element(mask='url(#h)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#a')
    use.svg-bg_element(mask='url(#i)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#b')
    use.svg-bg_element.opacity-anim(mask='url(#j)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#c')
    path.stroke-anim(d='M657.5 848.5l46 46', stroke-width='3', stroke-linecap='square')
    path(d='M1360.5 1206.5l89-89M761.5 42.5l42-42', stroke-width='3', stroke-linecap='square')
    use.svg-bg_element(mask='url(#k)', stroke-width='6', transform='rotate(90 1193.375 341.5)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#d')
    use.svg-bg_element(mask='url(#l)', stroke-width='6', transform='rotate(45 1610.8 542.863)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#e')
    use.svg-bg_element.rotate-anim(mask='url(#m)', stroke-width='6', transform='rotate(45 51.045 1001.045)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#f')
    use.svg-bg_element(mask='url(#n)', stroke-width='6', transform='rotate(20 46.045 334.045)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#g')
    
View Compiled
.dropdown {
    $itemHeight: $baseSize * 2;
    width: 15em;
    position: relative;
    &__trigger {
        display: inline-block;
        position: absolute;
        top: 0;
        width: 100%;
        height: $baseSize * 3;
        padding: $baseSize;
        box-sizing: border-box;
        opacity: 0;
        z-index: 2;
        cursor: pointer;
        &__icon {
            position: absolute;
            padding: ($baseSize / 2);
            right: 0;
            top: .2em;
        }
        &:focus {
            top: -200em;
            &~ .dropdown__trigger__icon .svg-icon {
                opacity: .25;
            }
            &~ .dropdown__list__item--title {
                height: $itemHeight;
            }
            &~ .dropdown__list {
                li {
                    .dropdown__list__item {
                        height: $itemHeight;
                        &:hover {
                            transition-duration: $normalDuration;
                            opacity: 1;
                            background-image: linear-gradient(90deg, rgba($white, .8) .10em, transparent .10em);
                            background-position: 100% bottom;
                        }
                    }
                    .dropdown__list__radio:checked + .dropdown__list__item {
                        padding: 0 ($baseSize / 2);
                        border: 1px dashed rgba($white, .2);
                        border-top: 0;
                        border-bottom: 0;
                    }
                }
            }
        }
    }
    &__list {
        overflow: auto;
        max-height: $itemHeight * 5.5;
        width: 100%;
        transition: all .1s $bezier;
        transition-delay: .15s;
        &__radio {
            display: none;
            &:checked {
                &+ .dropdown__list__item {
                    height: $itemHeight;
                    padding: 0 ($baseSize * 2) 0 ($baseSize / 2);
                    opacity: 1;
                    background-image: linear-gradient(90deg, rgba($white, .8) .10em, transparent .10em);
                    animation: onActive .2s $bezier forwards;
                }
            }
        }
        &__item {
            height: 0;
            overflow: hidden;
            padding: 0 ($baseSize / 2);
            transition: all .1s $bezier;
            transition-delay: .15s;
            color: $white;
            font-family: 'Playfair Display', serif;
            font-style: italic;
            cursor: pointer;
            color: $white;
            background-image: linear-gradient(90deg, rgba($white, .4) .10em, transparent .10em);
            background-size: .4em 1px;
            background-repeat: repeat-x;
            background-position: 0 bottom;
            opacity: .5;
            &--title {
                z-index: 1;
                position: relative;
                pointer-events: none;
                opacity: 1;
                background-image: linear-gradient(90deg, rgba($white, .8) .10em, transparent .10em);
            }
            &--amount {

            }
        }
    }
}
.svg-icon {
    transition: all .5s $bezier;
}


@keyframes onActive {
    0%,
    100% {
        background-color: rgba($white, 0);
    }
    50% {
        background-color: rgba($white, .25);
    }
}
View Compiled
// ¯\_(ツ)_/¯

External CSS

  1. https://codepen.io/tadaima/pen/RKQrdr.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.