@import "../variables/colors";
@import "../variables/dimensions";

$arrowSize: 16px;

@mixin triangle() {
    width: 0;
    height: 0;
    border-left: $arrowSize solid transparent;
    border-right: $arrowSize solid transparent;
    position: absolute;
    left: -($arrowSize);
    border-bottom: $arrowSize solid;
}

.rc-banner-wrap {
    position: relative;
}

.rc-banner {
    border: 1px solid $mediumGrayColor;
    border-radius: $border-radius-base;
    padding: $default-padding;
    margin: $arrowSize 0;
}

.rc-banner-triangle-top {
    position: absolute;
    width: 2*$arrowSize;
    height: $arrowSize;
    top: -$arrowSize;
}
.rc-banner-triangle-inner {
    position: relative;
    width: 2*$arrowSize;
    height: $arrowSize;
}

.rc-banner-triangle-fill {
    @include triangle();
    top: 1px;
    border-bottom-color: $whiteColor;
}

.rc-banner-triangle-border {
    @include triangle();
    top: 0;
    border-bottom: $arrowSize solid $mediumGrayColor;
}
.rc-banner-close-button {
    position: absolute;
    top: 0;
    right: 0;
}