/* ============================================================================
   06-COMPONENTS -> #SITEPLAN
   ========================================================================= */

/**
 * Displays a siteplan map and allows users to add markers that specify a
 * ploits location.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Siteplan
 */

.siteplan {
    --siteplan-bg: var(--form-input-bg);
    --siteplan-color: var(--form-input-color);
    --siteplan-border-color: var(--form-input-border-color);
    --siteplan-border-radius: var(--form-input-border-radius);
    --siteplan-border-width: var(--form-input-border-width);
    --siteplan-height: var(--form-input-height);
    --siteplan-shadow: var(--form-input-shadow);
    --siteplan-padding-y: var(--form-input-padding-y);
    --siteplan-padding-x: var(--form-input-padding-x);
    --siteplan-pin-bg: var(--button-primary-bg);
    --siteplan-pin-border-color: var(--button-primary-border-color);
    --siteplan-pin-border-width: var(--border-width);
    --siteplan-pin-color: var(--button-primary-color);
    --siteplan-pin-size: var(--space-5);
    --siteplan-pin-hover-bg: var(--button-primary-hover-bg);
    --siteplan-pin-hover-border-color: var(--button-primary-hover-border-color);

    background-color: var(--siteplan-bg);
    border: var(--siteplan-border-width) solid var(--siteplan-border-color);
    border-radius: var(--siteplan-border-radius);
    overflow: hidden;
    position: relative;
}


/**
 * Siteplan guide
 */

.siteplan__guide {
    background-color: var(--bg-secondary);
    border: var(--siteplan-border-width) solid var(--siteplan-border-color);
    border-radius: var(--siteplan-border-radius);
    box-shadow: var(--shadow-md);
    left: var(--siteplan-padding-x);
    padding: var(--siteplan-padding-y) var(--siteplan-padding-y);
    position: absolute;
    top: var(--siteplan-padding-y);
    width: var(--space-48);
}


/**
 * Siteplan container
 */

.siteplan__container {
    overflow: auto;
    width: 100%;
}


/**
 * Siteplan inner
 */

.siteplan__inner {
    position: relative;
}


/**
 * Siteplan markers
 */

.siteplan__markers {
    bottom: 0;
    height: 50%;
    left: 0;
    pointer-events: none; 
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: var(--z-index-10);
}


/**
 * Siteplan pin
 */

.siteplan__pin {
    @include font-size('xs');
    @include transition(('color', 'background-color', 'border'));
    align-items: center;
    background-color: var(--siteplan-pin-bg);
    border: var(--siteplan-pin-border-width) solid var(--siteplan-pin-border-color);
    border-radius: 50%;
    box-sizing: border-box;
    color: var(--siteplan-pin-color);
    cursor: pointer;
    display: flex;
    height: var(--siteplan-pin-size);
    justify-content: center;
    pointer-events: auto;
    position: absolute;
    transform: translate(-50%, -50%);
    width: var(--siteplan-pin-size);
    z-index: var(--z-index-50);

    &:hover {
        background-color: var(--siteplan-pin-hover-bg);
        border-color: var(--siteplan-pin-hover-border-color);
    }
}


/**
 * Siteplan image
 */

.siteplan__image {
    max-width: unset;
    width: 100%;
}


/**
 * Siteplan controls
 */

.siteplan__controls {
    align-items: center;
    bottom: var(--space-4);
    display: flex;
    flex-direction: row;
    position: absolute;
    right: var(--space-4);
}




/* MODIFIERS
   ========================================================================= */

/**
 * Modifier: Siteplan focus
 */

.siteplan[data-focus=true] {
    .siteplan__pin {
        opacity: .5;
    }
}


/**
 * Modifier: Siteplan zoom
 */

.siteplan[data-zoom=true] {
    .siteplan__inner {
        width: 150%;
    }

    .siteplan__marker {
        transform: scale(.5) translate(-50%, -50%);
    }
}


/**
 * Modifier: Siteplan guide right
 */

.siteplan__guide[data-side=right] {
    left: auto;
    right: var(--space-4);
}


/**
 * Modifier: Siteplan pin moving
 */

.siteplan__pin[data-move=true] {
    background-color: var(--color-primary-muted-button-active-bg);
    border-color: var(--color-primary-muted-button-active-border-color);
    opacity: 1 !important;
}