/**
 * Utility
 *
 * Properties such as display: flex usually require declaration both in parent element in LightDOM and in parent element in <slot>.
 * When adding a new utility, also add style in `src/components/TalkieSlide.ts`
 */

[flex]       { display: flex !important; }
[vertical]   { flex-direction: column !important; }
[horizontal] { flex-direction: row !important; }

[v-center]             { justify-content: center !important; }
[horizontal][v-center] { align-items: center !important; }

[v-top]             { justify-content: flex-start !important; }
[horizontal][v-top] { align-items: flex-start !important; }

[v-bottom]             { justify-content: flex-end !important; }
[horizontal][v-bottom] { align-items: flex-end !important; }

[h-center]             { align-items: center !important; }
[horizontal][h-center] { justify-content: center !important; }

[h-left]             { align-items: flex-start !important; }
[horizontal][h-left] { justify-content: flex-start !important; }

[h-right]             { align-items: flex-end !important; }
[horizontal][h-right] { justify-content: flex-end !important; }

[h-left] > *  { text-align: left !important; }
[h-right] > * { text-align: right !important; }

[s-center] { align-self: center !important; }
[s-start]  { align-self: flex-start !important; }
[s-end]    { align-self: flex-end !important; }
