/*
 * This file specifies common dimensions.
 * A line height of 16px is assumed for calculating the rem values
 */

:root {
    /* RADII */
    --dimensions--radius--small: 0.25rem;                               /* 4px */
    --dimensions--radius--medium: 0.5rem;                               /* 8px */
    --dimensions--radius--large: 1rem;                                  /* 16px */

    /* HEIGHT */
    --dimensions--height--textarea: 5.375rem;                           /* 86px */
    --dimensions--height--input: 2.6875rem;                             /* 43px */
    --dimensions--height--header: 4.75rem;                              /* 76px */
    --dimensions--height--language-selector--dropdown: 1.5rem;          /* 24px */
    --dimensions--height--language-selector--options--min: 3rem;        /* 48px */
    --dimensions--height--register--checkbox-container: 2.75rem;        /* 44px */
    --dimensions--height--remember-me--checkbox: 0.75rem;               /* 12px */
    --dimensions--height--language-selector: 1.25rem;                   /* 20px */

    /* MARGIN, PADDING & GAP */
    --dimensions--margin-padding-gap--neg-large: -0.75rem;              /* -12px */
    --dimensions--margin-padding-gap--neg-small: -0.375rem;             /* -6px */
    --dimensions--margin-padding-gap--x-small: 0.25rem;                 /* 4px */
    --dimensions--margin-padding-gap--small: 0.5rem;                    /* 8px */
    --dimensions--margin-padding-gap--medium: 0.75rem;                  /* 12px */
    --dimensions--margin-padding-gap--large: 1rem;                      /* 16px */
    --dimensions--margin-padding-gap--x-large: 1.5rem;                  /* 24px */
    --dimensions--margin-padding-gap--xx-large: 2rem;                   /* 32px */
    --dimensions--margin-padding-gap--xx-large-modified: 1.25rem;       /* 20px */
    --dimensions--margin-padding-gap--desktop--top-bottom: 5rem;
    --dimensions--margin-padding-gap--mobile--top-bottom: 2rem;
    --dimensions--margin-padding-gap--mobile--left-right: 0.375rem;
    --dimensions--margin-padding-gap--language-selector: 1.125rem;      /* 18px */

    /* ICON */
    --dimensions--icon--x-small: 0.75rem;                               /* 12px */
    --dimensions--icon--small: 0.875rem;                                /* 14px */
    --dimensions--icon--medium: 1rem;                                   /* 16px */
    --dimensions--icon--large: 1.125rem;                                /* 18px */

    /* BORDERS */
    --dimensions--border--regular: 0.0625rem;                           /* 1px */

    /* BREAKPOINTS */
    /* Note: unlike SCSS, CSS media calls can't handle variables making breakpoints.css obsolete */
    --for-reference__breakpoints--small: 576px;
}

