@import "dxHelpers/reset";
@import "dxHelpers/text";

:host {
    --dx-c-hr-padding-horizontal: var(--dx-g-page-padding-horizontal);
    --dx-c-hr-color: var(--dx-g-gray-95);
    --dx-c-font-color: var(--dx-g-hr-font-color);
    --dx-c-stroke-width: 2px;
}

p,
h2 {
    display: flex;
    flex-direction: row;
    font-family: var(--dx-g-font-display);
    font-size: var(--dx-g-text-sm);
    color: var(--dx-c-font-color);
    text-transform: capitalize;
    letter-spacing: 0;
    line-height: 18px;
}

p::before,
h2::before,
p::after,
h2::after {
    content: "";
    flex: 1 1;
    border-bottom: var(--dx-c-stroke-width) solid var(--dx-c-hr-color);
    margin: auto;
    margin-right: 0;
    margin-left: 0;
}

h2::before {
    margin-right: var(--dx-g-spacing-md);
}

h2::after {
    margin-left: var(--dx-g-spacing-md);
}

dx-button {
    display: flex;
    width: 100%;
    text-transform: capitalize;
}

dx-button::before {
    content: "";
    border-bottom: var(--dx-c-stoke-width) solid var(--dx-c-hr-color);
    flex: 1 1;
    margin: auto;
    margin-right: var(--dx-g-spacing-md);
}