daisyui/utilities/join.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.join{--join-ss:0;--join-se:0;--join-es:0;--join-ee:0;--join-v:0;--join-h:1;align-items:stretch;display:inline-flex;@scope(&){&>:where(:focus,:has(:focus)){z-index:1}@media (hover:hover){&>:where(.btn:hover,:has(.btn:hover)){isolation:isolate}}& :where(:scope>:first-child){--join-ss:var(--radius-field);--join-se:calc(var(--radius-field) * var(--join-v));--join-es:calc(var(--radius-field) * var(--join-h));--join-ee:0}& :where(:scope>:last-child){--join-ss:0;--join-se:calc(var(--radius-field) * var(--join-h));--join-es:calc(var(--radius-field) * var(--join-v));--join-ee:var(--radius-field)}& :where(:scope>:only-child){--join-ss:var(--radius-field);--join-se:var(--radius-field);--join-es:var(--radius-field);--join-ee:var(--radius-field)}}}.join-item{border-style:solid;border-width:var(--border,1px);border-radius:var(--join-ss) var(--join-se) var(--join-ee) var(--join-es);&:not(:first-child,:disabled,[disabled],.btn-disabled){margin-block-start:calc(var(--border,1px) * -1 * var(--join-v));margin-inline-start:calc(var(--border,1px) * -1 * var(--join-h))}&:is(:disabled,[disabled],.btn-disabled){border-width:var(--border,1px);border-inline-end-width:calc(var(--border,1px) * var(--join-v));border-block-end-width:calc(var(--border,1px) * var(--join-h))}}.join-vertical{--join-v:1;--join-h:0;flex-direction:column}.join-horizontal{--join-v:0;--join-h:1;flex-direction:row}@media (width>=640px){.sm\:join{--join-ss:0;--join-se:0;--join-es:0;--join-ee:0;--join-v:0;--join-h:1;align-items:stretch;display:inline-flex;@scope(&){&>:where(:focus,:has(:focus)){z-index:1}@media (hover:hover){&>:where(.btn:hover,:has(.btn:hover)){isolation:isolate}}& :where(:scope>:first-child){--join-ss:var(--radius-field);--join-se:calc(var(--radius-field) * var(--join-v));--join-es:calc(var(--radius-field) * var(--join-h));--join-ee:0}& :where(:scope>:last-child){--join-ss:0;--join-se:calc(var(--radius-field) * var(--join-h));--join-es:calc(var(--radius-field) * var(--join-v));--join-ee:var(--radius-field)}& :where(:scope>:only-child){--join-ss:var(--radius-field);--join-se:var(--radius-field);--join-es:var(--radius-field);--join-ee:var(--radius-field)}}}.sm\:join-item{border-style:solid;border-width:var(--border,1px);border-radius:var(--join-ss) var(--join-se) var(--join-ee) var(--join-es);&:not(:first-child,:disabled,[disabled],.btn-disabled){margin-block-start:calc(var(--border,1px) * -1 * var(--join-v));margin-inline-start:calc(var(--border,1px) * -1 * var(--join-h))}&:is(:disabled,[disabled],.btn-disabled){border-width:var(--border,1px);border-inline-end-width:calc(var(--border,1px) * var(--join-v));border-block-end-width:calc(var(--border,1px) * var(--join-h))}}.sm\:join-vertical{--join-v:1;--join-h:0;flex-direction:column}.sm\:join-horizontal{--join-v:0;--join-h:1;flex-direction:row}}@media (width>=768px){.md\:join{--join-ss:0;--join-se:0;--join-es:0;--join-ee:0;--join-v:0;--join-h:1;align-items:stretch;display:inline-flex;@scope(&){&>:where(:focus,:has(:focus)){z-index:1}@media (hover:hover){&>:where(.btn:hover,:has(.btn:hover)){isolation:isolate}}& :where(:scope>:first-child){--join-ss:var(--radius-field);--join-se:calc(var(--radius-field) * var(--join-v));--join-es:calc(var(--radius-field) * var(--join-h));--join-ee:0}& :where(:scope>:last-child){--join-ss:0;--join-se:calc(var(--radius-field) * var(--join-h));--join-es:calc(var(--radius-field) * var(--join-v));--join-ee:var(--radius-field)}& :where(:scope>:only-child){--join-ss:var(--radius-field);--join-se:var(--radius-field);--join-es:var(--radius-field);--join-ee:var(--radius-field)}}}.md\:join-item{border-style:solid;border-width:var(--border,1px);border-radius:var(--join-ss) var(--join-se) var(--join-ee) var(--join-es);&:not(:first-child,:disabled,[disabled],.btn-disabled){margin-block-start:calc(var(--border,1px) * -1 * var(--join-v));margin-inline-start:calc(var(--border,1px) * -1 * var(--join-h))}&:is(:disabled,[disabled],.btn-disabled){border-width:var(--border,1px);border-inline-end-width:calc(var(--border,1px) * var(--join-v));border-block-end-width:calc(var(--border,1px) * var(--join-h))}}.md\:join-vertical{--join-v:1;--join-h:0;flex-direction:column}.md\:join-horizontal{--join-v:0;--join-h:1;flex-direction:row}}@media (width>=1024px){.lg\:join{--join-ss:0;--join-se:0;--join-es:0;--join-ee:0;--join-v:0;--join-h:1;align-items:stretch;display:inline-flex;@scope(&){&>:where(:focus,:has(:focus)){z-index:1}@media (hover:hover){&>:where(.btn:hover,:has(.btn:hover)){isolation:isolate}}& :where(:scope>:first-child){--join-ss:var(--radius-field);--join-se:calc(var(--radius-field) * var(--join-v));--join-es:calc(var(--radius-field) * var(--join-h));--join-ee:0}& :where(:scope>:last-child){--join-ss:0;--join-se:calc(var(--radius-field) * var(--join-h));--join-es:calc(var(--radius-field) * var(--join-v));--join-ee:var(--radius-field)}& :where(:scope>:only-child){--join-ss:var(--radius-field);--join-se:var(--radius-field);--join-es:var(--radius-field);--join-ee:var(--radius-field)}}}.lg\:join-item{border-style:solid;border-width:var(--border,1px);border-radius:var(--join-ss) var(--join-se) var(--join-ee) var(--join-es);&:not(:first-child,:disabled,[disabled],.btn-disabled){margin-block-start:calc(var(--border,1px) * -1 * var(--join-v));margin-inline-start:calc(var(--border,1px) * -1 * var(--join-h))}&:is(:disabled,[disabled],.btn-disabled){border-width:var(--border,1px);border-inline-end-width:calc(var(--border,1px) * var(--join-v));border-block-end-width:calc(var(--border,1px) * var(--join-h))}}.lg\:join-vertical{--join-v:1;--join-h:0;flex-direction:column}.lg\:join-horizontal{--join-v:0;--join-h:1;flex-direction:row}}@media (width>=1280px){.xl\:join{--join-ss:0;--join-se:0;--join-es:0;--join-ee:0;--join-v:0;--join-h:1;align-items:stretch;display:inline-flex;@scope(&){&>:where(:focus,:has(:focus)){z-index:1}@media (hover:hover){&>:where(.btn:hover,:has(.btn:hover)){isolation:isolate}}& :where(:scope>:first-child){--join-ss:var(--radius-field);--join-se:calc(var(--radius-field) * var(--join-v));--join-es:calc(var(--radius-field) * var(--join-h));--join-ee:0}& :where(:scope>:last-child){--join-ss:0;--join-se:calc(var(--radius-field) * var(--join-h));--join-es:calc(var(--radius-field) * var(--join-v));--join-ee:var(--radius-field)}& :where(:scope>:only-child){--join-ss:var(--radius-field);--join-se:var(--radius-field);--join-es:var(--radius-field);--join-ee:var(--radius-field)}}}.xl\:join-item{border-style:solid;border-width:var(--border,1px);border-radius:var(--join-ss) var(--join-se) var(--join-ee) var(--join-es);&:not(:first-child,:disabled,[disabled],.btn-disabled){margin-block-start:calc(var(--border,1px) * -1 * var(--join-v));margin-inline-start:calc(var(--border,1px) * -1 * var(--join-h))}&:is(:disabled,[disabled],.btn-disabled){border-width:var(--border,1px);border-inline-end-width:calc(var(--border,1px) * var(--join-v));border-block-end-width:calc(var(--border,1px) * var(--join-h))}}.xl\:join-vertical{--join-v:1;--join-h:0;flex-direction:column}.xl\:join-horizontal{--join-v:0;--join-h:1;flex-direction:row}}@media (width>=1536px){.\32 xl\:join{--join-ss:0;--join-se:0;--join-es:0;--join-ee:0;--join-v:0;--join-h:1;align-items:stretch;display:inline-flex;@scope(&){&>:where(:focus,:has(:focus)){z-index:1}@media (hover:hover){&>:where(.btn:hover,:has(.btn:hover)){isolation:isolate}}& :where(:scope>:first-child){--join-ss:var(--radius-field);--join-se:calc(var(--radius-field) * var(--join-v));--join-es:calc(var(--radius-field) * var(--join-h));--join-ee:0}& :where(:scope>:last-child){--join-ss:0;--join-se:calc(var(--radius-field) * var(--join-h));--join-es:calc(var(--radius-field) * var(--join-v));--join-ee:var(--radius-field)}& :where(:scope>:only-child){--join-ss:var(--radius-field);--join-se:var(--radius-field);--join-es:var(--radius-field);--join-ee:var(--radius-field)}}}.\32 xl\:join-item{border-style:solid;border-width:var(--border,1px);border-radius:var(--join-ss) var(--join-se) var(--join-ee) var(--join-es);&:not(:first-child,:disabled,[disabled],.btn-disabled){margin-block-start:calc(var(--border,1px) * -1 * var(--join-v));margin-inline-start:calc(var(--border,1px) * -1 * var(--join-h))}&:is(:disabled,[disabled],.btn-disabled){border-width:var(--border,1px);border-inline-end-width:calc(var(--border,1px) * var(--join-v));border-block-end-width:calc(var(--border,1px) * var(--join-h))}}.\32 xl\:join-vertical{--join-v:1;--join-h:0;flex-direction:column}.\32 xl\:join-horizontal{--join-v:0;--join-h:1;flex-direction:row}}}