/*
    Styling for the CaretPairIcon component.
*/
/* The caret pair icon of a button that shows more or less: two of the site's filled carets, one
   above the other or side by side, pointing apart or together. One above the other, the pair fills
   a 0.7rem by 0.85rem box. Each caret is 0.6 of the box's width; a caret fills about 0.64 of its
   icon's width, so the icon is 0.7rem x 0.6 / 0.64. The carets' centers are half the box's height
   apart, a quarter of it from its top and bottom, so the second icon overlaps the first by its size
   less that half. */
.caret-pair-icon
{
    --caret-pair-icon-caret-size: calc(0.7rem * 0.6 / 0.64);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 0.7rem;
    height: 0.85rem;

    ion-icon
    {
        flex-shrink: 0;
        font-size: var(--caret-pair-icon-caret-size);
    }
    ion-icon + ion-icon
    {
        margin-top: calc(0.85rem / 2 - var(--caret-pair-icon-caret-size));
    }

    /* Side by side, the same pair turned a quarter turn: a 0.85rem by 0.7rem box, the carets'
       centers half its width apart. */
    &.caret-pair-icon-horizontal
    {
        flex-direction: row;
        width: 0.85rem;
        height: 0.7rem;

        ion-icon + ion-icon
        {
            margin-top: 0;
            margin-left: calc(0.85rem / 2 - var(--caret-pair-icon-caret-size));
        }
    }
}