@import "../../css/units.css";
@import "../../css/colors.css";

.wrapper {
    display: flex;
    flex-grow: 1;
    border: 1px solid $ui-black-transparent;
    background: white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
}
[theme="dark"] .wrapper {
    background: $ui-primary;
}

[dir="ltr"] .wrapper {
    border-top-right-radius: $space;
    border-bottom-right-radius: $space;
}

[dir="rtl"] .wrapper {
    border-top-left-radius: $space;
    border-bottom-left-radius: $space;
}

.detail-area {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: visible;
}

[dir="ltr"] .detail-area {
    border-left: 1px solid $ui-black-transparent;
}

[dir="rtl"] .detail-area {
    border-right: 1px solid $ui-black-transparent;
}