@use '@justeattakeaway/pie-css/scss' as p;

:host {
    display: block;
}

:host([orientation="vertical"]) {
   height: 100%;
}

.c-divider {
    --divider-bg-color: var(--dt-color-divider-default);
    --divider-width: 100%;
    --divider-min-width: 16px;
    --divider-height: 1px;
    --divider-label-max-width: 90%;
    --divider-font-family: var(--dt-font-body-l-family);
    --divider-font-size: #{p.font-size(--dt-font-body-l-size)};
    --divider-line-height: #{p.font-size(--dt-font-body-l-line-height)};

    width: var(--divider-width);

    &,
    hr {
        margin: 0;
        border: 0;
        background-color: var(--divider-bg-color);
    }

    &:not(.c-divider--labelled) {
        height: var(--divider-height);
    }

    &.c-divider--labelled {
        display: flex;
        align-items: center;
        text-align: center;
        gap: var(--dt-spacing-b);
        background-color: transparent;
        color: var(--dt-color-content-subdued-solid);

        .c-divider-label {
            font-size: var(--divider-font-size);
            line-height: var(--divider-line-height);
            font-family: var(--divider-font-family);
            max-width: var(--divider-label-max-width);
            word-wrap: break-word;
        }

        hr {
            flex-grow: 1;
            height: var(--divider-height);
            min-width: var(--divider-min-width);
        }

        &.c-divider--inverse {
            color: var(--dt-color-content-inverse-solid);
        }
    }

    &.c-divider--inverse {
        --divider-bg-color: var(--dt-color-divider-inverse);
    }

    &.c-divider--vertical {
        --divider-width: 1px;
        --divider-height: 100%;
    }
}