$arrow-width: 12;
$inner-arrow-width: 11;
$border-color: #808080;
:host {
    .arrow {
        width: 0;
        height: 0;
        margin-left: $arrow-width - 2 + px;
        z-index: 50;
        border-left: $arrow-width + px solid transparent;
        border-right: $arrow-width + px solid transparent;

        &.up {
            border-bottom: $arrow-width + px solid $border-color;
        }
        &.down {
            border-top: $arrow-width + px solid $border-color;
            margin-top: -1px;
        }

        &:before {
            height: $inner-arrow-width + px;
            display: block;
            width: $inner-arrow-width + px;
            border-left: $inner-arrow-width + px solid transparent;
            border-right: $inner-arrow-width + px solid transparent;
            margin-left: -$inner-arrow-width + px;
            position: absolute;
            content: "";
        }

        &.up:before {
            border-bottom: $inner-arrow-width + px solid white;
            top: 1px;
        }

        &.down:before {
            border-top: $inner-arrow-width + px solid white;
            bottom: 1px;
        }
    }
    .box {
        background: white;
        border-radius: 0.25rem;
        -webkit-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
        box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
        border: solid $border-color;
        border-width: 1px;
        margin-top: -1px;
    }
    .symbol {
        border-radius: 0.2rem;
        background-color: #ffa300;
        color: white;
        padding: 1px 10px;
        font-size: 16px;
        font-weight: 900;
        margin-right: 10px;
    }
}