/* Modal */
.tvm-connect-modal > *:not([class]) {
    width: 100%;
}

.tvm-connect-modal .uk-modal-content {
    background: var(--tvm-connect-modal-content-background);
    border-radius: var(--tvm-connect-modal-content-border-radius);
    box-shadow: var(--tvm-connect-modal-content-box-shadow);
    color: var(--tvm-connect-modal-content-color);
    padding: var(--tvm-connect-modal-content-padding-vertical) var(--tvm-connect-modal-content-padding-horizontal);
}

.tvm-connect-modal .uk-modal-header {
    background: none;
    padding: 0 var(--tvm-connect-modal-header-padding-horizontal) var(--tvm-connect-modal-header-padding-vertical);
}

.tvm-connect-modal .uk-modal-title {
    color: var(--tvm-connect-modal-title-color);
    font-size: var(--tvm-connect-modal-title-font-size);
    font-weight: var(--tvm-connect-modal-title-font-weight);
    line-height: var(--tvm-connect-modal-title-line-height);
    text-align: center;
}

.tvm-connect-modal .uk-modal-body {
    padding: var(--tvm-connect-modal-body-padding-vertical) var(--tvm-connect-modal-body-padding-horizontal);
}

.tvm-connect-modal .uk-modal-body:last-child {
    padding-bottom: 0;
}

.tvm-connect-modal .uk-modal-footer {
    background: none;
    padding: var(--tvm-connect-modal-footer-padding-vertical) var(--tvm-connect-modal-footer-padding-horizontal) 0;
}

/* Drawer */
.tvm-connect-drawer .uk-drawer-content-wrapper {
    --drawer-height: auto;
}

.tvm-connect-drawer .uk-drawer-content {
    background: var(--tvm-connect-drawer-content-background);
    border-radius: var(--tvm-connect-drawer-content-border-radius) var(--tvm-connect-drawer-content-border-radius) 0 0;
    box-shadow: none;
    color: var(--tvm-connect-drawer-content-color);
    padding: var(--tvm-connect-drawer-content-padding-vertical) var(--tvm-connect-drawer-content-padding-horizontal);
}

.tvm-connect-drawer .uk-drawer-header {
    padding: 0 var(--tvm-connect-drawer-header-padding-horizontal) var(--tvm-connect-drawer-header-padding-vertical);
}

.tvm-connect-drawer .uk-drawer-title {
    color: var(--tvm-connect-drawer-title-color);
    font-size: var(--tvm-connect-drawer-title-font-size);
    font-weight: var(--tvm-connect-drawer-title-font-weight);
    line-height: var(--tvm-connect-drawer-title-line-height);
    text-align: center;
}

.tvm-connect-drawer .uk-drawer-body {
    padding: var(--tvm-connect-drawer-body-padding-vertical) var(--tvm-connect-drawer-body-padding-horizontal);
}

.tvm-connect-drawer .uk-drawer-body:last-child {
    padding-bottom: 0;
}

.tvm-connect-drawer .uk-modal-close-default,
.tvm-connect-drawer .uk-drawer-close {
    color: var(--close-color, #a5a9b4);
}

.tvm-connect-drawer .uk-drawer-close {
    --drawer-close-position: var(--modal-close-position, 24px);
}

.tvm-connect-modal .uk-modal-close-default:hover,
.tvm-connect-modal .uk-modal-close-default:focus,
.tvm-connect-drawer .uk-drawer-close:hover,
.tvm-connect-drawer .uk-drawer-close:focus {
    color: var(--close-hover-color, #383838);
}

.tvm-modal-page {
    box-sizing: border-box;
    overflow-y: clip;
    padding-right: var(--global-scroll-width);
}

.tvm-modal-page body {
    overflow: hidden;
    overflow: clip;
    width: 100%;
}

:root {
    /* Modal */
    --tvm-connect-modal-content-background: var(--modal-content-background, #fff);
    --tvm-connect-modal-content-border-radius: 12px;
    --tvm-connect-modal-content-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
    --tvm-connect-modal-content-color: var(--base-body-color, #383838);
    --tvm-connect-modal-content-padding-horizontal: 18px;
    --tvm-connect-modal-content-padding-vertical: var(--tvm-connect-modal-content-padding-horizontal);
    --tvm-connect-modal-header-padding-horizontal: 0;
    --tvm-connect-modal-header-padding-vertical: var(--tvm-connect-modal-content-padding-vertical);
    --tvm-connect-modal-title-color: var(--base-heading-color, #383838);
    --tvm-connect-modal-title-font-size: var(--modal-title-font-size, 18px);
    --tvm-connect-modal-title-font-weight: 500;
    --tvm-connect-modal-title-line-height: var(--modal-title-line-height, 22px);
    --tvm-connect-modal-body-padding-horizontal: 0;
    --tvm-connect-modal-body-padding-vertical: var(--tvm-connect-modal-content-padding-vertical);
    --tvm-connect-modal-footer-padding-horizontal: 0;
    --tvm-connect-modal-footer-padding-vertical: var(--tvm-connect-modal-content-padding-vertical);

    /* Drawer */
    --tvm-connect-drawer-content-background: var(--drawer-content-background, #fff);
    --tvm-connect-drawer-content-border-radius: 16px;
    --tvm-connect-drawer-content-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
    --tvm-connect-drawer-content-color: var(--base-body-color, #383838);
    --tvm-connect-drawer-content-padding-horizontal: 24px;
    --tvm-connect-drawer-content-padding-vertical: var(--tvm-connect-drawer-content-padding-horizontal);
    --tvm-connect-drawer-header-padding-horizontal: 0;
    --tvm-connect-drawer-header-padding-vertical: var(--tvm-connect-drawer-content-padding-vertical);
    --tvm-connect-drawer-title-color: var(--base-heading-color, #383838);
    --tvm-connect-drawer-title-font-size: var(--drawer-title-font-size, 24px);
    --tvm-connect-drawer-title-font-weight: 500;
    --tvm-connect-drawer-title-line-height: var(--drawer-title-line-height, 28px);
    --tvm-connect-drawer-body-padding-horizontal: 0;
    --tvm-connect-drawer-body-padding-vertical: var(--tvm-connect-drawer-content-padding-vertical);
    --tvm-connect-drawer-footer-padding-horizontal: 0;
    --tvm-connect-drawer-footer-padding-vertical: var(--tvm-connect-drawer-content-padding-vertical);
}
