$primary-color : #F26C0D;
$secondary-color : #F0F0F1;
$primary-text-color: #1E1E1E;
$secondary-text-color: #3C434A;
$button-text-color: #756C69;
$max-width: 1400px;

.sp-location-weather-block-setting {

    // width and padding.
    .spl-weather-blocks-settings-page-wrapper,
    .spl-weather-block-settings-navigation ul {
        max-width: $max-width;
        margin: 0 auto;
        padding: 0 50px;
    }

    .spl-weather-block-setting-header-wrapper {
        padding: 16px 50px;
        display: flex;
        justify-content: space-between;
        color: #fff;
        align-items: center;
        max-width: $max-width;
        margin: 0 auto;
    }

    // override default a tag focus style.
    .wp-person a:focus .gravatar,
    a:focus,
    a:focus .media-icon img,
    a:focus .plugin-icon {
        box-shadow: none;
        outline: none;
    }

    .splwb-video-section-btn {
        ul {
            display: flex;
            gap: 18px;
            margin: 0;

            li {
                display: inline-flex;
                margin-bottom: 0;

                a {
                    color: $button-text-color;
                    text-decoration: none;
                    font-size: 16px;
                    font-weight: 600;
                    padding: 17px 24px;
                    border-radius: 4px;
                    border: 1px solid transparent;
                    transition: all .3s linear;
                }
            }

            li:nth-child(1) a {
                color: #fff;
                background-color: $primary-color;
            }

            li:nth-child(1) a:hover {
                background-color: #e9510c;
            }

            li:nth-child(2) a {
                display: flex;
                color: #756C69;
                border-color: #756C69;

                svg {
                    margin-left: 5px;
                    margin-right: -4px;
                    fill: #756C69;
                    transition: all .3s linear;
                }
            }

            li:nth-child(2) a:hover {
                color: #fff;
                background-color: $primary-color;
                border-color: $primary-color;

                svg {
                    margin-left: 5px;
                    fill: #fff;
                }
            }
        }
    }
}