@import url("colors.css");
@import url("main.css");

/*
    ESRI Widgets contain a shadow-dom, usually between the calcite-action / calcite-button
    and the underlying <button> attributes.  There are several variables that ESRI
    exposes and some they do not (those marked with -internal) but in some cases they
    inject styling directly into the component.  Where a shadow-dom is in place
    this makes it very difficult to change those particular stylings.  You will
    sse lots of !important markings in here to get around some of those inline style
    injections
 */

/* Overwrite the calcite color system for widgets */
.esri-view,
.esri-widget {
    --calcite-sans-family: var(--threegis-font-family);
    --calcite-font-size-0: 14px;
    --calcite-font-size-1: 14px;
    --calcite-ui-icon-color: var(--text-default);
    --calcite-color-border-white: var(--background-default);
    --calcite-color-border-ghost: #0000004d;
    --calcite-color-border-input: #949494;
    --calcite-color-border-3: var(--border-gray-light);
    --calcite-color-border-2: var(--border-gray);
    --calcite-color-border-1: var(--primary-gray-semi-light);
    --calcite-color-text-link: #00619b;
    --calcite-color-text-inverse: var(--text-negative);
    --calcite-color-text-1: var(--text-default);
    --calcite-color-inverse-press: #202020;
    --calcite-color-inverse-hover: #2b2b2b;
    --calcite-color-inverse: #353535;
    --calcite-color-status-danger-press: #7c1d13;
    --calcite-color-status-danger-hover: #a82b1e;
    --calcite-color-status-danger: #d83020;
    --calcite-color-status-warning-press: #bfa200;
    --calcite-color-status-warning-hover: #d9bc00;
    --calcite-color-status-warning: #edd317;
    --calcite-color-status-success-press: #1a6324;
    --calcite-color-status-success-hover: #288835;
    --calcite-color-status-success: #35ac46;
    --calcite-color-status-info-press: #00304d;
    --calcite-color-status-info-hover: #004874;
    --calcite-color-status-info: #00619b;
    --calcite-color-brand-underline: #00619b66;
    --calcite-color-brand-press: var(--text-active);
    --calcite-color-brand-hover: var(--text-hover);
    --calcite-color-transparent-tint: #fffc;
    --calcite-color-brand: var(--primary-hex);
    --calcite-color-transparent-press: var(--background-active);
    /* the following controls the hover of the buttons on Layer List row in TOC,
    setting it to background-hover made it the same hover as the row */
    --calcite-color-transparent-hover: #0000000a;
    --calcite-color-transparent: #0000;
    --calcite-color-background: #f8f8f8;
    --calcite-color-foreground-1: var(--background-default);

    /* Select (Dropdown) styling */

    --calcite-select-text-color: var(--text-default);
    --calcite-select-border-color: var(--border-gray);
    --calcite-select-icon-color: var(--text-default);
    --calcite-select-icon-color-hover: var(--text-hover);
    --calcite-select-background-color: var(--background-default);

     /* Popover Border Radius */
    --calcite-popover-corner-radius: 6px;

    /* List Item Hover */
    --calcite-color-transparent-scrim: var(--background-hover);

    /* The following are used haphazardly and inconsistently.
    Sometimes they are the active state, sometimes they are the default state.
    Rather than risk it, we're going to set it all to --text-default. */

    /* Active State */
    --calcite-color-foreground-3: var(--background-active);
    --calcite-color-text-3: var(--text-default);

    /* Hover State */
    --calcite-color-foreground-2: var(--background-hover);
    --calcite-color-text-2: var(--text-default);

    --calcite-color-focus: var(--border-active);
    --calcite-ui-focus-color: var(--border-default);

    --calcite-action-corner-radius: 6px;

    background-color: var(--background-default);
    color: var(--text-default);


}

/* The Copy Coordinates button in the Coordinate Conversion widget has a bug where it is ALWAYS hidden.
   This keeps it from showing empty space where the button should be, and keeps the coordinates from looking like
   something is possible on hover */

.esri-coordinate-conversion__row-button {
    display: flex !important;
}

/* Now that we're taking up space, make sure it blends in with the background */
.esri-coordinate-conversion__tools li.esri-widget--button {
    background-color: var(--background-default);
}

/* Disable the hover state, since there is no interaction available on hover (coordinate conversion widget) */
.esri-coordinate-conversion__display:hover,
.esri-coordinate-conversion__select-row:hover {
    background-color: var(--background-default);
    color: var(--text-default);
}

/* Remove the outline that is on by default on buttons
   Copy Coordinates on the Reverse Geocode popup is an example of this */
.esri-widget button:not(:focus-visible) {
    border: none !important;
}

.esri-coordinate-conversion__tools button:focus,
.esri-widget--button:focus,
.esri-widget button:focus {
    outline: none !important;
}

/* Try to give popover buttons our same styling */
.esri-popup .esri-widget--button,
.esri-popup .esri-widget button {
    background-color: var(--background-default);
    color: var(--text-default);

    border-radius: 4px;
    padding: 8px;

    --calcite-color-focus: transparent;
}

.esri-popup .esri-widget--button:hover,
.esri-popup .esri-widget button:hover {
    background-color: var(--background-hover) !important;
    color: var(--text-hover) !important;
}

.esri-popup .esri-widget--button:active,
.esri-popup .esri-widget button:active {
    background-color: var(--background-active) !important;
    color: var(--text-active) !important;
}

.esri-popup .esri-widget--button:focus-visible,
.esri-popup .esri-widget button:focus-visible {
    outline: 2px solid var(--border-active) !important;
    outline-offset: -2px !important;
}

.esri-popup .esri-widget--button[disabled],
.esri-popup .esri-widget button[disabled] {
    background-color: var(--background-disabled) !important;
    color: var(--text-disabled) !important;
}

/* End popover button styling */

.esri-component.esri-widget,
.esri-component.esri-widget .esri-widget--button:is(calcite-button),
.esri-component.esri-widget .esri-widget--button:is(calcite-action) {
    border-radius: var(--calcite-action-corner-radius, 6px) !important;
}

.esri-component.esri-expand,
.esri-expand__toggle,
.esri-widget--button:is(calcite-button),
.esri-widget--button:is(calcite-button) button,
calcite-button button,
calcite-button .interaction-container {
    height: 40px !important;
    width: 40px !important;
}

calcite-button button {
    inline-size: 40px !important;
}

/* ArcgisExpand is using a calcite-action with a shadow dom, this attempts to center the 32x32 button in 40x40 */
.esri-widget--button:is(calcite-action) {
    align-content: center;
    text-align: center;
    justify-content: center;
}

/* Keep the round buttons round */
.esri-widget--button:is(calcite-button) calcite-button button,
calcite-button {
    --calcite-button-corner-radius: 6px;
}

calcite-icon:not([icon="view-hide"], [icon="view-visible"]) {
    & svg {
        width: 20px;
        height: 20px;
    }
}

calcite-icon>.svg {
    font-size: 1rem;
}

.esri-widget {
    font-family: var(--threegis-font-family);
}

/* Selection color in the basemap gallery is hard-coded and not using a variable, if ESRI changes that this can go away */
.esri-basemap-gallery__item--selected,
.esri-basemap-gallery__item.esri-basemap-gallery__item--selected:hover,
.esri-basemap-gallery__item.esri-basemap-gallery__item--selected:focus-visible {
    border-color: var(--calcite-action-indicator-color) !important;
}

.esri-component.esri-basemap-gallery {
    margin-left: 0px !important;
}

.custom-popup-hide-pointer .esri-popup__pointer,
.custom-popup-hide-pointer .esri-popup__main-container::after {
    display: none !important;
}

.custom-popup-fit-width-to-content .esri-popup__main-container {
    width: auto !important;
    max-width: fit-content !important;
    padding: 4px 8px !important;
}

/** Change margins for buttons to decrease spacing from 10px **/
.esri-ui-top-right .esri-component,
.esri-ui-top-left .esri-component {
    margin-bottom: 8px;
}

.esri-ui-bottom-right .esri-component {
    margin-left: 8px;
}

.esri-ui-bottom-left .esri-component {
    margin-right: 8px;
}

/** This removes the copy button from teh coordinate container and makes sure the hover and cursor is also removed.
    The copy button here does not work, so we don't want to show it.**/
.esri-coordinate-conversion .esri-icon-duplicate {
    display: none !important;
}

.esri-coordinate-conversion__row-button:hover {
    background-color: transparent !important;
    cursor: default !important;
}

/* Remove the box shadow from the calcite action parent component.  We'll add this back in the Hover State */
.esri-ui-corner .esri-component.esri-widget {
    box-shadow: none !important;
}

/* Basic Default Styling */
.esri-widget--button:is(calcite-button) {
    border: 1px solid var(--border-gray);
    box-shadow: none !important;
    /* box-shadow is injected in the style, have to have important here */

    /* Calcite Buttons have two parts, calcite-button outside of the shadow-dom and button inside of the shadow-dom
    The focus color outline is applied to the button... because it is in the shadow-dom, we need a variable to size this
    correctly (or pad it correctly) and ESRI does not provide one.  Setting this to transparent and handling the outline
    color ourselves keeps us in compliance with WCAG standards but avoids awkward spacing issues */

    --calcite-color-focus: transparent;
}

/* Basic Default Styling */
.esri-widget--button:is(calcite-action) {
    border: 1px solid var(--border-gray);
    padding: 4px;
    box-sizing: content-box;
    box-shadow: none !important;
    /* box-shadow is injected in the style, have to have important here */

    /* Calcite Buttons have two parts, calcite-button outside of the shadow-dom and button inside of the shadow-dom
        The focus color outline is applied to the button... because it is in the shadow-dom, we need a variable to size this
        correctly (or pad it correctly) and ESRI does not provide one.  Setting this to transparent and handling the outline
        color ourselves keeps us in compliance with WCAG standards but avoids awkward spacing issues */

    --calcite-color-focus: transparent;
}

.esri-widget--button:not([toggled="true"]):is(calcite-button) {
    --calcite-button-background-color: var(--background-default) !important;
    background-color: var(--background-default) !important;

    color: var(--text-default) !important;
    --calcite-button-text-color: var(--text-default) !important;
}

.esri-expand__popover-content calcite-button {
    --calcite-button-background-color: var(--background-default) !important;
    --calcite-button-text-color: var(--text-default) !important;
    --calcite-color-text-1: var(--text-default) !important;
}

.esri-expand__popover-content calcite-button[appearance="outline"] {
    --calcite-button-background-color: var(--background-default) !important;
    --calcite-button-text-color: var(--text-primary) !important;
    --calcite-color-border-1: var(--text-primary) !important;
    --calcite-color-text-1: var(--text-primary) !important;
}

/* Basic Default Styling */
.esri-widget--button:not([toggled="true"]):is(calcite-action) {
    --calcite-action-background-color: var(--background-default) !important;
    background-color: var(--background-default) !important;

    --calcite-ui-icon-color: var(--text-default) !important;
    color: var(--text-default);

    --calcite-color-foreground-1: var(--background-default) !important;
}

/* Basic Default Styling */
.esri-widget--button[toggled="true"]:is(calcite-button) {
    --calcite-button-background-color: var(--background-active) !important;
    background-color: var(--background-active) !important;

    color: var(--text-active) !important;
    --calcite-button-text-color: var(--text-active) !important;

    fill: var(--text-active);
}

.esri-expand__popover-content calcite-button:active {
    --calcite-button-background-color: var(--background-active) !important;
    --calcite-button-text-color: var(--text-active) !important;
    --calcite-icon-color: var(--text-active) !important;
    --calcite-color-text-1: var(--text-active) !important;
}

.esri-expand__popover-content calcite-button[appearance="outline"]:active {
    --calcite-button-background-color: var(--background-active) !important;
    --calcite-button-text-color: var(--text-active) !important;
    --calcite-color-border-1: var(--text-active) !important;
    --calcite-color-text-1: var(--text-active) !important;
}

/* Basic Default Styling */
.esri-widget--button[toggled="true"]:is(calcite-action) {
    --calcite-action-background-color: var(--background-active) !important;
    background-color: var(--background-active) !important;

    --calcite-ui-icon-color: var(--text-active) !important;
    color: var(--text-active);

    --calcite-color-foreground-1: var(--background-active) !important;

    --calcite-icon-color: var(--text-active);
}

/* State Styling */
.esri-widget--button:is(calcite-action):hover,
.esri-widget--button:is(calcite-button):hover {
    background-color: var(--background-hover) !important;
    color: var(--text-hover) !important;
}

.esri-expand__popover-content calcite-button:hover {
    --calcite-button-background-color: var(--background-hover) !important;
    --calcite-button-text-color: var(--text-hover) !important;
    --calcite-icon-color: var(--text-hover) !important;
    --calcite-color-text-1: var(--text-hover) !important;
}

.esri-expand__popover-content calcite-button[appearance="outline"]:hover {
    --calcite-button-background-color: var(--background-hover) !important;
    --calcite-button-text-color: var(--text-hover) !important;
    --calcite-color-border-1: var(--text-hover) !important;
    --calcite-color-text-1: var(--text-hover) !important;
}

.esri-widget--button:is(calcite-action):hover {
    --calcite-ui-icon-color: var(--text-hover) !important;
    --calcite-action-background-color: var(--background-hover) !important;
    --calcite-action-background-color-hover: var(--background-hover) !important;
    --calcite-color-foreground-1: var(--background-hover) !important;
    --calcite-icon-color: var(--text-hover);

    border: 1px solid var(--border-gray);
    box-shadow: none !important;
}

.esri-widget--button:is(calcite-button):hover {
    --calcite-button-background-color: var(--background-hover) !important;
    --calcite-button-text-color: var(--text-hover) !important;
    --calcite-color-text-1: var(--text-hover) !important;
    fill: var(--text-hover);

    border: 1px solid var(--border-gray);
    box-shadow: none !important;
}

.esri-widget--button:is(calcite-action):active,
.esri-widget--button:is(calcite-button):active {
    --calcite-color-text-1: var(--text-active) !important;
    --calcite-ui-icon-color: var(--text-active) !important;
    color: var(--text-active) !important;
    background-color: var(--background-active) !important;
    border: none;
}

.esri-widget--button:is(calcite-action):active {
    --calcite-action-background-color: var(--background-active) !important;
    --calcite-color-foreground-1: var(--background-active) !important;
    --calcite-icon-color: var(--text-active) !important;
}

.esri-widget--button:is(calcite-button):active {
    --calcite-button-background-color: var(--background-active) !important;
    --calcite-button-text-color: var(--text-active) !important;
    fill: var(--text-active);
}

.esri-widget--button:is(calcite-action):focus-visible,
.esri-widget--button:is(calcite-button):focus-visible {
    outline: 2px solid var(--border-active);
}

.esri-expand__popover-content calcite-button:focus-visible {
    outline: 2px solid var(--border-active);
    outline-offset: -2px;
}

.esri-widget--button:is(calcite-action)[disabled],
.esri-widget--button:is(calcite-button)[disabled] {
    --calcite-color-text-1: var(--text-disabled);
    cursor: default;
    pointer-events: none;
    color: var(--text-disabled);
    background-color: var(--background-disabled) !important;
    border: none !important;
    box-shadow: none !important;
}

.esri-expand__popover-content calcite-button[disabled] {
    --calcite-color-text-1: var(--text-disabled);
    color: var(--text-disabled);
    background-color: var(--background-disabled) !important;
    --calcite-icon-color: var(--text-disabled) !important;
}

.esri-expand__popover-content calcite-button[appearance="outline"][disabled] {
    --calcite-button-background-color: var(--background-disabled) !important;
    --calcite-color-text-1: var(--text-disabled);
    --calcite-button-text-color: var(--text-disabled) !important;
    --calcite-color-border-1: var(--text-disabled) !important;
}

.esri-widget--button:is(calcite-action)[disabled] {
    --calcite-opacity-disabled: 1;
    --calcite-ui-icon-color: var(--text-disabled) !important;
    --calcite-action-background-color: var(--background-disabled) !important;
    --calcite-color-foreground-1: var(--background-disabled) !important;
    --calcite-icon-color: var(--text-disabled) !important;
}

.esri-widget--button:is(calcite-button)[disabled] {
    --calcite-opacity-disabled: 1;
    --calcite-ui-icon-color: var(--text-disabled) !important;

    /* Gets the background color of the calcite-button > button */
    --calcite-button-background-color: var(--background-disabled) !important;
    --calcite-color-foreground-1: var(--background-disabled) !important;
    fill: var(--text-disabled);
}

calcite-popover {
    --calcite-color-foreground-1: var(--background-default) !important;
}

/* Remove the scrim background from calcite-sheets used in ESRI widgets like the Layer List */
calcite-sheet {
    --calcite-sheet-scrim-background-internal: transparent !important;
}

.esri-view {
    --esri-view-outline-color: transparent;
    --esri-view-outline: none;
    --esri-view-outline-offset: 0;
}

.esri-view:focus-visible {
    --esri-view-outline-color: var(--calcite-color-brand);
    --esri-view-outline: 2px solid var(--esri-view-outline-color);
    --esri-view-outline-offset: -2px;
}

.esri-expand__sheet .esri-expand__panel-content,
.esri-expand__sheet .esri-expand__content-container{
    overflow: auto;
}

.esri-ui calcite-panel {
    position: fixed;
    overflow: auto;
    top: 0;
    bottom: 0;
}

.esri-expand__sheet .esri-expand__content-container .esri-basemap-gallery {
    width: 100%;
    overflow: hidden;
}

.esri-widget:has(.esri-coordinate-conversion) {
    --calcite-sheet-min-height: 160px !important;
}