/* eclipse.css */

.eclipse-search-text-field { 
    --_container-padding-vertical: .5rem;
    z-index: 1;   
    position: fixed;
    width: calc(100vw - 2rem);
    max-width: 40rem;
    left: 50%;
    transform: translateX(-50%);   
    top: 1rem;
    --_container-color: var(--md-sys-color-outline-variant);
    transition-property: border-radius, width;
    --_focus-active-indicator-color: var(--md-sys-color-outline);
    --_active-indicator-color: var(--md-sys-color-outline);
    --_hover-state-layer-color: none;
}

.eclipse-search-active {
    width: 100%;
    top: 0;
}

.eclipse-search-container
{
    padding-right: 1rem;
}

.eclipse-search-container-active {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.eclipse-page-scrim
{
    min-width: 100%;
    min-height: 6.5rem;
}

.eclipse-trail-icon
{
    margin-left: -.5rem;
}

.eclipse-input-search
{
    transform: translateY(0.1rem);
    margin-left: -.75rem;
    font-size: 0.875rem;
    min-width: 13rem;
}

.eclipse-search-progress
{
    --md-circular-progress-size: 2.5rem;
    --md-circular-progress-active-indicator-width: 5;
}

.eclipse-select-page
{
    --max-width: 40rem;
    --width: 100%;
    display: inline;
}

.eclipse-select-buttons-container
{
    position: relative;
    overflow: hidden;
    padding-top: .75rem;
    width: var(--width);
    max-width: var(--max-width);
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: .5rem;
    justify-content: space-evenly;
    background-color: var(--md-sys-color-surface);
}

.eclipse-select-button
{
    --button-min-width: 5rem;
}

.eclipse-select-list
{   
    --select-list-height-adjust: 10rem; 
    background: var(--md-sys-color-surface);
    display: block;
    margin-left: auto;
    margin-right: auto;
    --md-icon-color: var(--md-sys-color-on-surface);
    width: var(--width);
    max-width: var(--max-width);
    max-height: calc(100vh - var(--select-list-height-adjust));
    min-height: calc(100vh - var(--select-list-height-adjust));
    overflow-y: scroll;
}

.eclipse-list-longer
{
    --select-list-height-adjust: 4rem; 
}

.eclipse-list-start-icon
{
    padding-left: 1rem;
    color: var(--md-sys-color-on-surface);
}

.eclipse-rise-icon
{
    display: block;
    color: var(--md-sys-color-on-surface);
    align-self: center;
    color: var(--md-sys-color-on-surface);
}

.eclipse-rise-background
{
    background-color: rgba(220, 40, 0, 0.15);
}

.eclipse-list-circumstance-icon
{
    max-width: 5.5rem;
    min-width: 5.5rem;
    overflow-x: clip;
    text-overflow: ellipsis;
    padding-left: 1rem;
    color: var(--md-sys-color-on-surface);
}

.eclipse-details-circumstance-icon
{
    margin-right: 2rem;
    color: var(--md-sys-color-on-surface);
}

.eclipse-list-explain-left-icon
{    
    margin-left: -1rem;
}

.eclipse-circumstance-headline
{
    min-width: 9rem;
}

.eclipse-depth-icon
{
    max-width: 4rem;
    min-width: 4rem;
    margin-right: 2rem;
}

.eclipse-list-item
{
    --_trailing-space: 0;
}

.eclipse-icon 
{
    transform: rotate(220deg) translate(-0.6rem, 0.3rem);
}

.eclipse-circumstance-list
{
    display: block;
    max-width: 100vw;
    max-height: calc(100vh - 23rem);
    overflow-y: scroll;
    overflow-x: hidden;
}

.eclipse-list-explain
{
    --md-list-item-top-space: .25rem;
    --md-list-item-bottom-space: .25rem;
    --md-list-item-one-line-container-height: 1rem;
    --md-list-item-label-text-color: var(--md-sys-color-on-primary-container);
    background-color: var(--md-sys-color-primary-container);
}

.eclipse-list-details
{
    --md-list-item-top-space: .25rem;
    --md-list-item-bottom-space: .25rem;
    --md-list-item-one-line-container-height: 1rem;
    --md-list-item-label-text-color: var(--md-sys-color-on-primary-container);
    background-color: var(--md-sys-color-primary-container);
}

.eclipse-circumstances-start-slot
{
    margin-left: -1rem;
    display: inline-flex;
    min-width: 7rem;
    flex-direction: column;
}

.eclipse-details-item
{
    --md-list-item-top-space: .25rem;
    --md-list-item-bottom-space: .25rem;
    --md-list-item-two-line-container-height: 1rem;
}

.eclipse-list-end-icon
{
    color: var(--md-sys-color-on-surface);
}

.eclipse-map
{
    height: calc(100vh - var(--md-navigation-bar-container-height, 80px));
    max-height: calc(100vh - var(--md-navigation-bar-container-height, 80px));
    min-height: calc(100vh - var(--md-navigation-bar-container-height, 80px));
    min-width: 100%;
}

.eclipse-fab
{
    position: absolute;
    --md-fab-container-color: var(--md-sys-color-surface-variant);
}

.eclipse-fab-layer
{
    --ec-fab-layer-size: 2.5rem;
    --md-fab-container-height: var(--ec-fab-layer-size);
    --md-fab-container-width: var(--ec-fab-layer-size);;
    --md-fab-container-shape: var(--ec-fab-layer-size);;
    top: 5em;
    right: 1rem;
}

.eclipse-fab-center
{
    --ec-fab-layer-size: 3.5rem;
    --md-fab-container-height: var(--ec-fab-layer-size);
    --md-fab-container-width: var(--ec-fab-layer-size);;
    --md-fab-container-shape: var(--ec-fab-layer-size);;
    bottom: 7em;
    right: 1rem;
}

.eclipse-sim
{
    --_moon_size_adj: 0px;
    --_moon_size_fix: 1px;
    --_sun-size: 10rem;
    --_position: -50%;
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: calc(50% + 2rem);
}
.eclipse-sun
{
    background: radial-gradient(
        circle at 40% 50%,
        #d2d201,
        #774400
      );
    height: var(--_sun-size);
    width: var(--_sun-size);
    transform: translateX(var(--_position)) translateY(var(--_position));
}

.eclipse-moon
{
    --_offset_x: 0px;
    --_offset_y: 0px;
    z-index: 1;
    background: radial-gradient(
        circle at 40% 50%,
        rgba(25, 25, 25),
        rgba(10, 10, 10)
      );
    height: calc(var(--_sun-size) + var(--_moon_size_fix) + var(--_moon_size_adj));
    width: calc(var(--_sun-size) + var(--_moon_size_fix) + var(--_moon_size_adj));
    transform: translateX(calc(var(--_position) + var(--_offset_x))) translateY(calc(var(--_position) + var(--_offset_y)));
}

.eclipse-sim-stats
{
    position: relative;
    left: 1rem;
    margin-left: auto;
    top: 1rem;
    padding-bottom: .25rem;
}

.eclipse-mag-display
{
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.eclipse-cov-display
{
    margin-left: 1.5rem;
    margin-right: -1rem;
}

.eclipse-location-list
{
    --md-list-item-top-space: .25rem;
    --md-list-item-bottom-space: .25rem;
    --md-list-item-two-line-container-height: 2rem;
}

.eclipse-map-animate-btn
{
    position: absolute;
    z-index: 1;
    bottom: 1rem;
    left: 1rem;
}

.eclipse-header
{
    position: absolute;
    top: 4.75rem;
    z-index: 1;
    width: 100%;
}

.eclipse-headline 
{
    --header-width: calc(100% - 8rem);
    min-width: var(--header-width);
    width: var(--header-width);
    max-width: var(--header-width);
    padding: 0;
}

.eclipse-time-travel-icon
{
    max-width: 1rem;
    min-width: 1rem;
    max-height: 1rem;
    padding-right: .5rem;
    text-overflow: clip;
    --_icon-size: 1.25rem;
    transform: translateY(-0.05rem);
}

@keyframes flash {
    0% {
        background-color: var(--md-sys-color-outline-variant);
    }

    50% {
        background-color: var(--md-sys-color-background);
    }

    100% {
        background-color: var(--md-sys-color-outline-variant);
    }
}

.eclipse-list-flash
{
    animation-name: flash;
    animation-iteration-count: infinite;
    animation-duration: 750ms;
}