/* @group @Variables - linklist nav */

:root {
--linklist-action-background-hue: 220;
--linklist-background-saturation-value: 2.5;
--linklist-background-saturation: calc(var(--linklist-background-saturation-value) * 1%);
--linklist-background-luminance-value: 97.5;
--linklist-background-luminance: calc(var(--linklist-background-luminance-value) * 1%);

--linklist-alt-background-color: hsla(var(--color-white-hue), var(--color-white-saturation), var(--color-white-luminance), 1);
--linklist-alt-action-background-color: hsla(var(--linklist-action-background-hue), var(--linklist-background-saturation), var(--linklist-background-luminance), 1);
}

@media (prefers-color-scheme: dark) {

:root {
--linklist-background-luminance: calc((100 + 20 - var(--linklist-background-luminance-value))* 1%);
}

}

/* @end @Variables - linklist nav */

/* @group @Variables - linklist nav */

:root {
--linklist-alt-background-color: hsla(var(--color-white-hue), var(--color-white-saturation), var(--color-white-luminance), 1);
--linklist-alt-action-background-color: hsla(var(--linklist-action-background-hue), var(--linklist-background-saturation), var(--linklist-background-luminance), 1);
}

/* @end @Variables - linklist nav */



/* @group @Variables - border */

:root {
--linkbtn-border: 0 0 var(--link-shadow-size) var(--link-shadow-color), inset 0 0 0 1px var(--color-border-separater);
--linkbtn-action-border: 0 0 var(--link-action-shadow-size) var(--link-action-shadow-color), inset 0 0 0 1px var(--color-border-separater);
--linkbtn-disabled-border: 0 0 var(--link-action-shadow-size) var(--link-action-shadow-color), inset 0 0 0 1px var(--link-disabled-shadow-color);
}

/* @end @Variables - border */



/* @group @Variables - border */

:root {
--linkbtn-border: 0 0 var(--link-shadow-size) var(--link-shadow-color), inset 0 0 0 1px var(--color-border-separater);
--linkbtn-action-border: 0 0 var(--link-action-shadow-size) var(--link-action-shadow-color), inset 0 0 0 1px var(--color-border-separater);
--linkbtn-disabled-border: 0 0 var(--link-action-shadow-size) var(--link-action-shadow-color), inset 0 0 0 1px var(--link-disabled-shadow-color);
}

/* @end @Variables - border */

/* @group @Variables - border */

:root {
--linklist-border: inset 0 1px 0 0 var(--color-border-separater), inset 0 -1px 0 0 var(--color-border-separater);
}

@media all and (min-width: 48em) {

:root {
--linklist-border: 1px 0 0 0 var(--color-border-separater), -1px 0 0 0 var(--color-border-separater), 0 -1px 0 0 var(--color-border-separater);
}

}

/* @end @Variables - border */

/* @group @Variables - border */

:root {
--linklist-alt-border: inset 0 -1px 0 0 var(--color-border-separater);
--linklist-alt-action-border: 0 0 var(--link-action-shadow-size) var(--link-action-shadow-color), 0 0 0 1px var(--color-border-separater);
}

@media all and (min-width: 48em) {

:root {
--linklist-alt-action-border: 0 0 var(--link-action-shadow-size) var(--link-action-shadow-color), inset 0 -1px 0 var(--color-border-separater);
}

}

/* @end @Variables - border */