welcome-ui/dist/Drawer.css

Customizable design system with react, typescript, tailwindcss and ariakit.

@layer components{._asset-drawer_2lawg_3{overflow:hidden;border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl)}._asset-drawer_2lawg_3[class*=root]{height:calc(100% - 3rem)}._content-wrapper_2lawg_13{height:100%;margin-top:var(--spacing-xl);overflow-y:auto;width:100%}@media screen and (min-width: 736px){._content-wrapper_2lawg_13{margin-top:var(--spacing-3xl)}}._content-max-width_2lawg_24{flex:1;margin:0 auto;width:100%;max-width:var(--asset-drawer-content-max-width, 51.25rem)}._content_2lawg_13{--asset-drawer-content-padding: 0 var(--spacing-md) var(--spacing-xl);padding:var(--asset-drawer-content-padding)}@media screen and (min-width: 736px){._content_2lawg_13{--asset-drawer-content-padding: 0 var(--spacing-xl) var(--spacing-3xl)}}._asset-drawer-header_2lawg_39{display:flex;flex-direction:column;gap:var(--spacing-xl);justify-content:space-between;background-color:var(--color-neutral-10);margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);position:sticky;top:0;z-index:1}@media screen and (min-width: 736px){._asset-drawer-header_2lawg_39{align-items:center;flex-direction:row}}._back-button_2lawg_57{align-items:center;display:flex;gap:var(--spacing-md)}@media screen and (min-width: 736px){._back-button_2lawg_57{gap:var(--spacing-xl)}}._title_2lawg_67{display:flex;flex-direction:column;gap:var(--spacing-xxs)}._icon-block_2lawg_72{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-md);background-color:var(--color-beige-20);transition:background-color var(--duration-medium);--icon-block-size: var(--spacing-3xl);width:var(--icon-block-size);height:var(--icon-block-size)}._icon-block_2lawg_72._size-md_2lawg_84{--icon-block-size: var(--spacing-3xl)}._icon-block_2lawg_72._size-sm_2lawg_87{--icon-block-size: var(--spacing-xxl)}}@layer components{._root_11f0r_3{background-color:var(--color-neutral-10);border:var(--border-width-sm) solid var(--color-neutral-30);z-index:999;position:fixed;display:flex;flex-direction:column;overflow:auto;opacity:0;transition:var(--duration-medium);max-width:100%;--drawer-left: 0;--drawer-right: 0;--drawer-top: 0;--drawer-bottom: 0;--drawer-height: 100%;--drawer-width: 100%;--drawer-transform: translateY(0, 0);left:var(--drawer-left);right:var(--drawer-right);top:var(--drawer-top);bottom:var(--drawer-bottom);width:var(--drawer-width);height:var(--drawer-height);transform:var(--drawer-transform)}._root_11f0r_3._placement-bottom_11f0r_30{--drawer-top: auto;--drawer-transform: translateY(100%)}._root_11f0r_3._placement-left_11f0r_34{--drawer-right: auto;--drawer-transform: translateX(-100%)}._root_11f0r_3._placement-right_11f0r_38{--drawer-left: auto;--drawer-transform: translateX(100%)}._root_11f0r_3._placement-top_11f0r_42{--drawer-bottom: auto;--drawer-transform: translateY(-100%)}._root_11f0r_3._placement-top_11f0r_42._size-sm_11f0r_46,._root_11f0r_3._placement-bottom_11f0r_30._size-sm_11f0r_46{--drawer-height: 25rem}._root_11f0r_3._placement-top_11f0r_42._size-md_11f0r_49,._root_11f0r_3._placement-bottom_11f0r_30._size-md_11f0r_49{--drawer-height: 34.375rem}._root_11f0r_3._placement-top_11f0r_42._size-lg_11f0r_52,._root_11f0r_3._placement-bottom_11f0r_30._size-lg_11f0r_52{--drawer-height: 42.5rem}._root_11f0r_3._placement-left_11f0r_34._size-sm_11f0r_46,._root_11f0r_3._placement-right_11f0r_38._size-sm_11f0r_46{--drawer-width: 25rem}._root_11f0r_3._placement-left_11f0r_34._size-md_11f0r_49,._root_11f0r_3._placement-right_11f0r_38._size-md_11f0r_49{--drawer-width: 34.375rem}._root_11f0r_3._placement-left_11f0r_34._size-lg_11f0r_52,._root_11f0r_3._placement-right_11f0r_38._size-lg_11f0r_52{--drawer-width: 42.5rem}._root_11f0r_3[data-enter]{opacity:1;--drawer-transform: translateX(0, 0)}._backdrop_11f0r_68{background-color:var(--color-overlay);z-index:999;position:fixed;top:0;right:0;left:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out}._backdrop_11f0r_68._drawer-hide-on-interact-outside_11f0r_79{cursor:pointer}._backdrop_11f0r_68[data-enter]{opacity:1}._content_11f0r_85{flex:1;padding:var(--spacing-xl)}@media screen and (min-width: 736px){._content_11f0r_85{overflow-y:auto}}._footer_11f0r_94{bottom:0;position:sticky;z-index:1;width:100%;background-color:var(--color-neutral-0);padding:var(--spacing-xl)}@media screen and (min-width: 736px){._footer_11f0r_94{bottom:auto;position:static}}._title_11f0r_108{display:flex;align-items:center;justify-content:space-between;position:sticky;z-index:1;top:0;width:100%;background-color:var(--color-neutral-10);margin:0;padding:var(--spacing-xl) var(--spacing-5xl) var(--spacing-xl) var(--spacing-xl)}._drawer-close_11f0r_120{position:absolute;right:var(--spacing-lg);top:var(--spacing-lg);z-index:10}}