/******** Typography *******/

.rt-typography {
    position: relative;
}

.rt-typohraphy-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ddd;
    padding-right: 8px;
    transition: border-color 0.1s linear;
    &:hover {
        border-color: var(--linkColor);
        a {
            opacity: 1;
            color: var(--linkColor);
        }
    }
    > div {
        padding: 10px 0 10px 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        i {
            margin: 0 7px;
            font-style: normal;
            font-size: 70%;
            opacity: 0.5;
            line-height: normal;
            position: relative;
            margin-top: -5px;
        }
        > span {
            position: relative;
            span {
                position: relative;
                z-index: 2;
            }
            &:after {
                position: absolute;
                content: "";
                display: block;
                top: -1px;
                left: -3px;
                right: -3px;
                bottom: -1px;
                border-radius: 2px;
                background: rgba(48,122,201, 0.3);
                opacity: 0;
            }
            &:hover{
                span {
                    color: var(--secondaryColor);
                }
                &:after {
                    opacity: 1;
                }
            }

        }
    }

    .rt-font {
        display: inline-flex;
        align-items: center;
        span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            max-width: 100px;
            display: inline-block;
            text-transform: capitalize;
        }
    }
    a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 17px;
        height: 17px;
        font-size: 10px;
        letter-spacing: 0.1em;
        opacity: 0.5;
        color: inherit;
        &:before {
            content: "\002022\002022\002022";
        }
    }
    
}

.rt-typography-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 430px;
    position: relative;
}

.rt-typography-top {
    display: flex;
    align-items: center;
    position: relative;
    height: 70px;
    padding: 0 20px;
    margin: 0;
    box-sizing: border-box;
    border-bottom: 1px dashed #eee;
    &.rt-static > * {
        transition: none !important;
    }
    ~ * {
        top: 70px;
        left: 0;
        right: 0;
    }
    li {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
        height: 28px;
        color: var(--primaryColor);
        cursor: pointer;
        border-radius: 3px;
        overflow: hidden;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        padding: 0 8px;
        margin-bottom: 0;
        background: #fff;
        box-sizing: border-box;
        border: 1px solid #d1d5d9;
        box-shadow: 0 0 0 0 transparent;
        transition: box-shadow 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955),
        border-color 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        &.active {
            border-color: var(--accentColor);
            box-shadow: 0 0 0 1px var(--accentColor);
        }
        &:hover {
            border-color: var(--accentColor);
        }
    }
    .rt-font {
        flex: 1;
        span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            text-transform: capitalize;
            transition: width 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        }
        input {
            border: none;
            margin: 0;
            padding: 0;
            width: 100%;
            font: inherit;
            color: inherit;
            &:focus {
                outline: none;
            }
        }
        svg {
            position: absolute;
            top: calc(50% - 3px);
            right: 8px;
            cursor: pointer;
            fill: currentColor;
            opacity: 0;
            transition: opacity 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        }
        &.active{
            svg {
                opacity: 1;
            }
        }
    }
    .rt-weight {
        justify-content: flex-end;
        width: 78px;
        margin-left: 7%;
        transition: width 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        &:before {
            position: absolute;
            z-index: 0;
            color: #727c88;
            content: "A";
            left: 8px;
            font-size: 15px;
            opacity: 1;
            margin-right: 10px;
            transition: font-weight 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955),
                opacity 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        }
        &:hover:before {
            font-weight: 700;
        }
        span {
            position: relative;
            z-index: 1;
            width: 44px;
            text-align: right;
            line-height: normal;
            background: #fff;
            box-shadow: 0px 0px 10px 3px #fff;
            &[data-variation*="i"] {
                font-style: italic;
            }
            &[data-variation="Default"] {
                opacity: 0;
            }
        }
    }
    .rt-back {
        z-index: 2;
        width: 28px;
        margin-right: 12px;
        margin-left: -44px;
        opacity: 0;
        transition: margin 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955),
        opacity 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        svg {
            fill: currentColor;
        }
    }
    &.rara-switch-panel{
        .rt-back {
            opacity: 1;
            margin-left: 0;
        }
        .rt-font span {
            width: 90%;
        }
        .rt-weight {
            margin-left: 5%;
            &:not(.active) {
                width: 45px;
                &:before {
                    opacity: 0;
                }
            }
        }
    }
}

.rt-typography-options {
    margin: 0;
    > li {
        align-items: center;
        padding: 0 20px;
        margin: 0;
        box-sizing: border-box;
        &:not(.rt-typography-variant) {
            display: flex;
            height: 95px;
        }
        &:not(:last-child) {
            border-bottom: 1px solid #eee;
        }
    }
    .rt-control {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        &::after {
            display: none;
        }
    }
    .rt-slider:before {
        --backgroundColor: #e3e6e8;
    }
    .rt-value-changer ul {
        box-shadow: 0 10px 20px 3px rgba(0, 0, 0, 0.07), 0 1px 3px 0px rgba(0, 0, 0, 0.03);
    }
    .rt-disabled-notification {
        background: rgba(243, 243, 245, 0.5);
    }
}

.rt-typography-variant {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 15px;
    height: 75px;
    ul {
        display: flex;
        li {
            flex: 1;
            display: flex;
            justify-content: center;
            position: relative;
            margin: 0;
            padding: 5px 0;
            cursor: pointer;
            border: 1px solid #dfe1e4;
            + li {
                margin-left: -1px;
            }
            &:before {
                font-size: 13px;
                font-weight: 700;
                letter-spacing: 0.04em;
            }
            &:first-child {
                border-radius: 3px 0 0 3px;
            }
            &:last-child {
                border-radius: 0 3px 3px 0;
            }
            &:not(.active) {
                color: #727c88;
                &:hover {
                    color: var(--accentColor);
                }
            }
            &.active {
                z-index: 2;
                color: #fff;
                background: var(--accentColor);
                border-color: var(--accentColor);
            }
            &[data-variant="capitalize"]:before {
                content: "Aa";
            }
            &[data-variant="uppercase"]:before {
                content: "AA";
            }
            &[data-variant="line-through"]:before {
                content: "Aa";
            }
            &[data-variant="underline"]:before {
                content: "Aa";
            }
            &:hover .rt-tooltip-top {
                opacity: 1;
                visibility: visible;
                transform: translate3d(0px, -40px, 0px);
            }
        }
    }
}

.rt-text-decoration{
    li{
        &:after {
            position: absolute;
            content: "";
            left: 0;
            right: 0;
            width: 50%;
            height: 1px;
            opacity: 0.7;
            background: currentColor;
            margin: auto;
            border-radius: 2px;
        }
        &[data-variant="underline"]:after {
            bottom: 6px;
        }
        &[data-variant="line-through"]:after {
            top: 3px;
            bottom: 0;
        }
    }
}

.rt-typography-single-font,
.rt-typography-variations li {
    cursor: pointer;
    position: relative;
    &:not(:first-child) {
        border-top: 1px solid #eee;
    }
}

.rt-typography-single-font:hover,
.rt-typography-single-font.active,
.rt-typography-variations li:hover,
.rt-typography-variations li.active {
    color: #fff;
    background: var(--accentColor);
    border-color: var(--accentColor);
    &:after {
        box-shadow: -5px 0px 15px 10px var(--accentColor);
    }
    + * {
        border-top-color: rgba(255, 255, 255, 0.3);
    }
}

.rt-typography-single-font.active:before,
.rt-typography-variations li.active:before {
    position: absolute;
    font: 400 17px/17px dashicons;
    content: "\f147";
    right: 20px;
}

.rt-typography-fonts {
    overflow-x: scroll;
    max-height: 360px;
}

.rt-typography-single-font {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    height: 85px;
    padding: 0 20px;
    box-sizing: border-box;
    &:before {
        top: 18px;
    }
    &:after {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        width: 10px;
        height: 100%;
        background: #fff;
        transform: translateX(100%);
        box-shadow: -5px 0px 15px 10px #fff;
    }
    .rt-font-name {
        opacity: 0.7;
    }
    .rt-font-preview {
        font-size: 20px;
        line-height: 1.3;
        margin-top: 10px;
        font-weight: normal;
        white-space: nowrap;
    }
    &:hover{
        .rt-font-name {
            opacity: 1;
        }
    }
}

.rt-typography-variations {
    overflow-x: auto;
    max-height: 360px;
    margin: 0;
    li {
        display: flex;
        align-items: center;
        height: 50px;
        margin-bottom: 0;
        padding: 0 20px;
        box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .rt-variation-name {
        font-size: 14px;
        line-height: 1.3;
    }
    [data-variation*="1"] {
        font-weight: 100;
    }
    [data-variation*="2"] {
        font-weight: 200;
    }
    
    [data-variation*="3"] {
        font-weight: 300;
    }
    
    [data-variation*="4"] {
        font-weight: 400;
    }
    
    [data-variation*="5"] {
        font-weight: 500;
    }
    
    [data-variation*="6"] {
        font-weight: 600;
    }
    
    [data-variation*="7"] {
        font-weight: 700;
    }
    
    [data-variation*="8"] {
        font-weight: 800;
    }
    
    [data-variation*="9"] {
        font-weight: 900;
    }
    
    [data-variation*="i"] {
        font-style: italic;
    }
}