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

$sandboxbanner-max-width: 584px;

.bdl-SandboxBanner {
    position: fixed;
    bottom: 0;
    left: 50%;
    z-index: $overlay-z-index + 1;
    display: flex;
    align-items: center;
    max-width: $sandboxbanner-max-width;
    height: 40px;
    padding-right: $bdl-grid-unit * 6;
    padding-left: $bdl-grid-unit * 6;
    background-color: fade-out($bdl-gray, .1);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    transform: translate(-50%, 0);
}

.bdl-SandboxBanner-text {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    color: $white;
    font-size: $bdl-fontSize;
    white-space: nowrap;
    text-overflow: ellipsis;
}