@layer breezer-lib, breezer-web-ui-lib;
/*
    This file contains the styles that apply globally, and aren't tied to any particular component.  
*/
:root {
  /*Gaps*/
  --gap-larger: 18px;
  --gap-standard: 15px;
  --gap-semi-compact: 10px;
  --gap-compact: 8px;
  --gap-tiny: 4px;
  /*Button Padding*/
  --btn-padding: 10px 15px;
  --btn-padding-secondary: 9px 16px;
  --btn-padding-compact: 8px 14px;
  /*Radius*/
  --border-radius-dialog: 25px;
  --border-radius-standard: 8px;
  --border-radius-compact: 6px;
  /*Text Size*/
  --text-extra-large: 25px;
  --text-very-large: 22px;
  --text-large: 18px;
  --text-regular: 15px;
  --text-small: 11px;
  --text-tiny: 9px;
  --font-size-button-regular: 16px;
  --text-list-item: 14px;
  --text-list-header: 12px;
  /*Colours*/
  --text-color: #222222;
  --text-color-semi-light: #222B;
  --text-color-light: #2228;
  --gray-50: #f8f9fa;
  --gray-100: #f1f3f4;
  --gray-200: #ebedee;
  --gray-300: #d3d9dc;
  --gray-400: #9aa5ab;
  --gray-500: #6b7a82;
  --gray-700: #3d4d55;
  --gray-900: #222222;
  --seperator-color-light: #ebedee;
  --seperator-color-dark: color-mix(in srgb, var(--seperator-color-light), var(--background-color-dark) 80%);
  --background-color: #ffffff;
  --background-color-medium: #AAA;
  --background-color-highlight: #f8f9fa;
  --background-color-feature: var(--seperator-color-dark);
  --background-color-feature-light: #00B0CA30;
  --background-color-dark: #031e2f;
  --background-color-dialog: #fafbfb;
  --background-color-feature-highlight: #00B0CA;
  --header-height: 78px;
  --header-background-color: #F6F5F1;
  --disabled-color: #CCC;
  --shadow-color: #EEE5;
  --font-stack: "Lato", sans-serif;
  --avatar-small: 25px;
  --risk-color-extreme: #ff1900;
  --risk-color-high: #ff8000;
  --risk-color-medium: #fcd672;
  --risk-color-low: #75e41a;
  --risk-color-other: #808080;
  --source-report-feature-color: #FABC18;
  --recommendation-feature-color: #008497;
  --consideration-feature-color: #0A639B;
  /*@function --color-mix-light(--base-color) {
        result: color-mix(in srgb, var(--base-color), white 50%);
    }

    @function --color-semi-transparent(--base-color) {
        result: color-mix(in srgb, var(--base-color), transparent 50%);
    }*/
  --source-report-color-light: color-mix(in srgb, var(--source-report-color), white 50%);
  --recommendation-feature-color-light: color-mix(in srgb, var(--recommendation-feature-color), white 50%);
  --recommendation-feature-color-light: color-mix(in srgb, var(--consideration-feature-color), white 50%);
  --source-report-color-semi-transparent: color-mix(in srgb, var(--source-report-color), transparent 50%);
  --recommendation-feature-color-semi-transparent: color-mix(in srgb, var(--recommendation-feature-color), transparent 50%);
  --recommendation-feature-color-semi-transparent: color-mix(in srgb, var(--consideration-feature-color), transparent 50%);
  --dashboard-item-color: #4fac95;
  --dashboard-item-due-color: #d6a21a;
  --dashboard-item-urgent-color: #cd4738;
  --dashboard-item-color-light: color-mix(in srgb, var(--dashboard-item-color), white 90%);
  --dashboard-item-due-color-light: color-mix(in srgb, var(--dashboard-item-due-color), white 90%);
  --dashboard-item-urgent-color-light: color-mix(in srgb, var(--dashboard-item-urgent-color), white 90%);
  --dashboard-stage-draft-color: var(--background-color-feature);
  --dashboard-stage-in-progress-color: #1adc8f;
  --dashboard-stage-ready-color: #71c507;
  --dashboard-stage-considered-color: #bbbba4;
  --expandable-left-width: 44px;
  --location-color-level-1: #002147;
  --location-color-level-2: #008497;
  --location-color-level-3: #0A639B;
  --location-color-level-4: #44B3E1;
  --location-color-level-5: #00A37B;
  --location-color-level-6: #FABC18;
  --location-color-level-7: #E39354;
  --location-color-level-8: #F08784;
  --location-color-level-9: #D95F6F;
  --location-color-level-10: #741B7C;
  --location-color-default: var(--dashboard-item-urgent-color);
  --location-color-opacity: 60%;
  --logo-color-highlight: #e86420;
}
html {
  font-family: "Lato", sans-serif;
  font-size: 14px;
}
.mono {
  font-family: "DM Mono", monospace;
}
.compact-pill {
  white-space: nowrap;
  padding: 2px var(--gap-compact);
  background-color: var(--background-color-feature-light);
  border-radius: 50px;
  color: var(--text-color-semi-light);
}
/*
    Styles for the small 'badge' display for source/rec/cons

    These are like
<span class="badge consideration">
    <h6>TITLE</h6>
    <div class="attribs">
        <span class="some-attrib">Some Attrib</span>
    </div>
</span>

*/
span.badge {
  border-left: solid 5px var(--badge-feature-color);
  padding-left: var(--gap-compact);
  display: inline-block;
}
span.badge.with-border {
  box-shadow: 0 0 5px 5px var(--shadow-color);
  border: solid 1px var(--seperator-color-light);
  border-left: solid 5px var(--badge-feature-color);
  border-radius: var(--border-radius-standard);
  padding: var(--gap-compact);
}
span.badge .code {
  font-size: var(--text-tiny);
  color: color-mix(in srgb, var(--badge-feature-color), black 20%);
  display: block;
}
span.badge > h6 {
  font-size: var(--text-regular);
  margin: 0;
  margin-bottom: var(--gap-tiny);
  color: var(--text-color);
}
span.badge > div.attribs {
  display: flex;
  flex-wrap: nowrap;
  font-size: var(--text-small);
  gap: var(--gap-compact);
  /*
        //TODO: when mixins are natively supported, can use them to make these all pills. 

        > * {
            @apply --compact-pill();
        }

        In the meantime, copy/paste from compact pill.

        */
}
span.badge > div.attribs > * {
  display: flex;
}
span.badge > div.attribs > *:not(.no-pill) {
  padding: 2px var(--gap-compact);
  background-color: var(--background-color-feature-light);
  border-radius: 50px;
  color: var(--text-color-semi-light);
}
/*
    This file contains the styles that apply globally, and aren't tied to any particular component.  
*/
breadcrumb-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-standard);
}
breadcrumb-header > h1 {
  width: 100%;
}
.blazored-modal-content > breezer-page[identifier="audit-record"] {
  width: 70vw;
}
.blazored-modal-content > div.actions,
.blazored-modal-content > * > div.actions {
  padding-top: var(--gap-standard);
  display: flex;
  justify-content: end;
  gap: var(--gap-compact);
}
.delete-dialog {
  min-width: 400px;
}
.delete-dialog span.badge {
  width: fit-content;
}
.delete-dialog h1 {
  margin-top: 5px;
}
.delete-dialog content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap-standard) * 2);
}
.delete-dialog content h3 {
  margin: 0;
}
.delete-dialog content .child-data .child {
  padding: var(--gap-semi-compact) 0;
  display: flex;
  gap: var(--gap-compact);
  align-items: center;
}
div.detail-page > .list > breezer-page.br-list[identifier='consideration'] > content > list-filter > form > .dam,
div.detail-page > .list > breezer-page.br-list[identifier='consideration'] > content > list-filter > form > .source-type,
div.detail-page > .list > breezer-page.br-list[identifier='consideration'] > content > list-filter > form > .source-title,
div.detail-page > .list > breezer-page.br-list[identifier='consideration'] > content > list-filter > form > .recommendation-title {
  display: none;
}
div.detail-page > .list > breezer-page.br-list[identifier='recommendation'] > content > list-filter > form > .dam,
div.detail-page > .list > breezer-page.br-list[identifier='recommendation'] > content > list-filter > form > .source-type,
div.detail-page > .list > breezer-page.br-list[identifier='recommendation'] > content > list-filter > form > .source-title {
  display: none;
}
.logo-highlight {
  color: var(--logo-color-highlight);
}