@use '@lucas-labs/lui-micro/color' as color;
@use '@lucas-labs/lui-micro/var' as var;

@mixin base {
    :root {
        // ┌───────┐
        // │ fonts │
        // └───────┘
        --fonts-proportional: #{var.get('font-family')};
        --fonts-monospace: #{var.get('code-font-family')};
        --fonts-emoji: #{var.get('emoji-font-family')};

        // ┌───────┬───────────────────┐
        // │ fonts │ weights & heights │
        // └───────┴───────────────────┘
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --line-height-default: normal;

        // ┌────────┐
        // │ images │
        // └────────┘
        --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
        --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
        --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
        
        // ┌────────┐
        // │ radius │
        // └────────┘
        --border-radius:        #{var.get('measure/.5x')};
        --border-radius-medium: #{var.get('measure/1x')};
        --border-radius-full:   calc(infinity * 1px);

        // ┌────────┐
        // │ others │
        // └────────┘
        --opacity-disabled:    0.55;
        --height-loading:      16rem;
        --min-height-textarea: 132px; // padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported
        --checkbox-size:       15px;  // height and width of checkbox and radio inputs
        --page-spacing:        24px;  // space between page elements
        --page-margin-x:       32px;  // minimum space on left and right side of page
        --tab-size:            4;
    }

    @media (min-width: 768px) and (max-width: 1200px) {
        :root {
            --page-margin-x: 24px;
        }
    }

    @media (max-width: 767.98px) {
        :root {
            --page-margin-x: 16px;
        }
    }
}