.op3-element[data-op3-element-type="icon"] {
    display: table;
    line-height: 0;

    .op3-element-icon__container {
        overflow: visible;
    }

    .op3-element-icon__link {
        color: inherit;
    }

    .op3-element-icon__wrapper {
        display: grid;
        border: 2px solid currentColor;

        &[data-op3-iconframe="none"] {
            border-color: transparent !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        &[data-op3-iconframe="outline"] {
            background: transparent !important;
            border-color: currentColor;
            padding: 25px;
        }

        &[data-op3-iconframe="filled"] {
            background: #ccc;
            border-color: currentColor;
            padding: 25px;
        }

        &[data-op3-iconshape="curved"] {
            border-radius: 10%;
        }

        &[data-op3-iconshape="circle"] {
            border-radius: 100%;
        }
    }

    .op3-element-icon__icon {
        grid-row: 1;
        grid-column: 1;
        font-size: 55px;
    }

    .op3-element-icon__link,
    .op3-element-icon__wrapper,
    .op3-element-icon__icon {
        transition: inherit;
    }

    .op3-icon2 {
        display: none;
    }

    // To satisfy Typography Control Panel we must use stronger
    // CSS selector for icon link.
    #op3-designer-element & .op3-element-icon__link {
        font-weight: inherit;
        font-style: inherit;
        text-decoration: inherit;
        text-transform: inherit;
        text-shadow: inherit;
        color: inherit;
    }
}