@import '../../../styles/variables';
@import './variables';

$arrow-size: 6px;

.nav-link-callout {
    position: relative;
    max-width: 330px;
    padding: 20px;
    color: $bdl-dark-blue-02;
    word-wrap: break-word;
    background-color: $bdl-dark-blue;
    border-color: $bdl-dark-blue;
    border-radius: 4px;

    &::before {
        position: absolute;
        width: 0;
        height: 0;
        border: $arrow-size solid transparent;
        content: '';
    }

    .nav-link-callout-target-attached-middle.nav-link-callout-target-attached-right > & {
        &::before {
            top: 50%;
            right: 100%;
            margin-top: -$arrow-size;
            border-right-color: inherit;
        }
    }

    .nav-link-callout-target-attached-bottom.nav-link-callout-target-attached-right > & {
        left: 10px;

        &::before {
            top: 85%;
            right: 100%;
            margin-top: -$arrow-size;
            border-right-color: inherit;
        }
    }
}

.nav-link-callout-close-button {
    position: absolute;
    right: 20px;
    cursor: pointer;
}

.nav-link-callout-element {
    z-index: $tooltip-z-index;
}

.left-nav-callout {
    display: flex;
    flex-flow: column;
    font-weight: normal;
    font-size: 13px;
    line-height: 1.54;
    letter-spacing: .3px;
    cursor: default;

    .left-nav-callout-title {
        margin-bottom: 6px;
        font-weight: bold;
        font-size: 16px;
        line-height: 1;
        letter-spacing: .4px;
    }

    .left-nav-callout-button-container {
        margin-left: auto;

        .left-nav-callout-button {
            padding: 10px;
            border-radius: 4px;
        }

        .left-nav-callout-secondary-button {
            color: $white;
            background: transparent;
            border-color: $white;
        }
    }
}