
// ボタンブロック
[data-type="loos/button"] {
    // [data-align="left/right"]時に、WordPressコアのheight:0が当たるのを阻止
    height: auto !important;

    &.is-selected {
        padding-top: 4px;
    }

    // [data-align="left/right"]時に、WordPressコアのfloatが当たるのを阻止
    > * {
        float: none !important;
        width: 100%;
        margin: 0 !important;
    }

    // HTML直接入力時
    &.-prev a {
        pointer-events: none;
    }

    .__prevLabel {
        margin-top: 8px;
        color: #666;
        font-size: 12px;
    }


    .swell-block-button__link {
        cursor: text;

        .rich-text {
            min-width: 1em;
        }

        &:not([data-has-icon]) .rich-text {
            display: block;
        }
    }

    &.is-style-btn_solid .swell-block-button__link {
        border-bottom: none !important;
    }

    &.is-style-more_btn .swell-block-button__link {
        min-width: 64%;
    }

    // hover時にリンク色に変わるのを阻止
    &.is-style-btn_normal,
    &.is-style-btn_solid,
    &.is-style-btn_shiny {

        a {
            color: #fff;
        }
    }

}


// 計測結果の表示
.swell-button-data {

    .__title {
        margin-bottom: 8px;
        font-weight: bold;
        font-size: 1.1em;
    }

    .__data {
        margin-bottom: 4px;
    }

    .__clearBtn {
        width: 100%;
        margin-top: 1em;
        text-align: center;

        .components-button {
            box-shadow: inset 0 0 0 1px #1e1e1e;
        }
    }
}


// リンク先プレビューボタン
.swell-block-button__urlPreview {
    display: flex;
    justify-content: center;
    padding-top: 4px;

    .components-button {
        // display: block;
        // width: 100%;
        max-width: 40em;
        padding: 4px !important;
        overflow: hidden;
        font-size: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}


// スタイルプレビュー
.swl-styleControls {

    .swell-block-button__link {
        min-width: 80%;
    }
}

.swl-colorPicker.for-swl-button {

    .swl-colorPicker__btn {
        margin: 0 !important;
        --swl--the-color--bg: var(--the-btn-bg, currentColor);
    }

    [data-color="red"] {
        --the-btn-color: var(--swl--btn-color--red);
        --the-btn-color2: var(--swl--btn-color2--red);
    }

    [data-color="blue"] {
        --the-btn-color: var(--swl--btn-color--blue);
        --the-btn-color2: var(--swl--btn-color2--blue);
    }

    [data-color="green"] {
        --the-btn-color: var(--swl--btn-color--green);
        --the-btn-color2: var(--swl--btn-color2--green);
    }

    .swl-colorPicker__btn:not(.is-style-btn_line) .__track {
        border: none;
    }

    .is-style-btn_line {
        --swl--the-color--bg: #fff;
        --swl--the-color--border: var(--the-btn-color);
    }


}
