/**
 * Sketch UI General Styles
 * 
 * This file contains general styles for the Sketch UI plugin.
 */

 :where(.descendant-colorway--base .sketch),
 .colorway--base {
    background-color: var(--base);
    color: var(--white);
    border-color: var(--base-ultra-dark);

    a,
    svg {
        color: var(--white);
    }
 }

:where(.descendant-colorway--base-ultra-light .sketch),
.colorway--base-ultra-light {
    background-color: var(--base-ultra-light);
    color: var(--base-semi-dark);
    border-color: var(--base-light);

    a,
    svg {
        color: var(--base-semi-dark);
    }
}   

:where(.descendant-colorway--base-light .sketch),
.colorway--base-light {
    background-color: var(--base-light);
    color: var(--base-dark);
    border-color: var(--base-semi-light);

    a,
    svg {
        color: var(--base-dark);
    }
}   

:where(.descendant-colorway--base-semi-light .sketch),
.colorway--base-semi-light {
    background-color: var(--base-semi-light);
    color: var(--base-ultra-dark);
    border-color: var(--base-semi-dark);

    a,
    svg {
        color: var(--base-ultra-dark);
    }
}   

:where(.descendant-colorway--base-semi-dark .sketch),
.colorway--base-semi-dark {
    background-color: var(--base-semi-dark);
    color: var(--base-ultra-light);
    border-color: var(--base-dark);

    a,
    svg {
        color: var(--base-ultra-light);
    }
}       

:where(.descendant-colorway--base-dark .sketch),
.colorway--base-dark {
    background-color: var(--base-dark);
    color: var(--base-ultra-light);
    border-color: var(--base-semi-dark);

    a,
    svg {
        color: var(--base-ultra-light);
    }
}       

:where(.descendant-colorway--base-ultra-dark .sketch),
.colorway--base-ultra-dark {
    background-color: var(--base-ultra-dark);
    color: var(--base-semi-light);
    border-color: var(--base-dark);

    a,
    svg {
        color: var(--base-semi-light);
    }
}       
 :where(.descendant-colorway--secondary-ultra-light .sketch),
.colorway--secondary-ultra-light {
    background-color: var(--secondary-ultra-light);
    color: var(--secondary-semi-dark);
    border-color: var(--secondary-light);

    a,
    svg {
        color: var(--secondary-semi-dark);
    }
}

:where(.descendant-colorway--secondary-light .sketch),
.colorway--secondary-light {
    background-color: var(--secondary-light);
    color: var(--secondary-dark);
    border-color: var(--secondary-semi-light);

    a,
    svg {
        color: var(--secondary-dark);
    }
}

:where(.descendant-colorway--secondary-semi-light .sketch),
.colorway--secondary-semi-light {
    background-color: var(--secondary-semi-light);
    color: var(--secondary-ultra-dark);
    border-color: var(--secondary-semi-dark);

    a,
    svg {
        color: var(--secondary-ultra-dark);
    }
}

:where(.descendant-colorway--secondary-semi-dark .sketch),
.colorway--secondary-semi-dark {
    background-color: var(--secondary-semi-dark);
    color: var(--secondary-ultra-light);
    border-color: var(--secondary-dark);

    a,
    svg {
        color: var(--secondary-ultra-light);
    }
}

:where(.descendant-colorway--secondary-dark .sketch),
.colorway--secondary-dark {
    background-color: var(--secondary-dark);
    color: var(--secondary-light);
    border-color: var(--secondary-ultra-dark);

    a,
    svg {
        color: var(--secondary-semi-light);
    }
}

:where(.descendant-colorway--secondary-ultra-dark .sketch),
.colorway--secondary-ultra-dark {
    background-color: var(--secondary-ultra-dark);
    color: var(--secondary-semi-light);
    border-color: var(--secondary-semi-dark);
}






:where(.descendant-colorway--neutral .sketch),
.colorway--neutral {
    background-color: var(--neutral);
    color: var(--white);
    border-color: var(--neutral-ultra-dark);

    a,
    svg {
        color: var(--white);
    }
}

:where(.descendant-colorway--neutral-ultra-light .sketch),
.colorway--neutral-ultra-light {
    background-color: var(--neutral-ultra-light);
    color: var(--neutral-semi-dark);
    border-color: var(--neutral-light);

    a,
    svg {
        color: var(--neutral-semi-dark);
    }
}

:where(.descendant-colorway--neutral-light .sketch),
.colorway--neutral-light {
    background-color: var(--neutral-light);
    color: var(--neutral-dark);
    border-color: var(--neutral-semi-light);

    a,
    svg {
        color: var(--neutral-dark);
    }
}

:where(.descendant-colorway--neutral-semi-light .sketch),
.colorway--neutral-semi-light {
    background-color: var(--neutral-semi-light);
    color: var(--neutral-ultra-dark);
    border-color: var(--neutral-semi-dark);

    a,
    svg {
        color: var(--neutral-ultra-dark);
    }
}

:where(.descendant-colorway--neutral-semi-dark .sketch),
.colorway--neutral-semi-dark {
    background-color: var(--neutral-semi-dark);
    color: var(--neutral-ultra-light);
    border-color: var(--neutral-dark);

    a,
    svg {
        color: var(--neutral-ultra-light);
    }
}

:where(.descendant-colorway--neutral-dark .sketch),
.colorway--neutral-dark {
    background-color: var(--neutral-dark);
    color: var(--neutral-light);
    border-color: var(--neutral-ultra-dark);

    a,
    svg {
        color: var(--neutral-semi-light);
    }
}

:where(.descendant-colorway--neutral-ultra-dark .sketch),
.colorway--neutral-ultra-dark {
    background-color: var(--neutral-ultra-dark);
    color: var(--neutral-semi-light);
    border-color: var(--neutral-semi-dark);

    a,
    svg {
        color: var(--neutral-semi-light);
    }
}







:where(.descendant-colorway--primary .sketch),
.colorway--primary {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary-semi-dark);

    a,
    svg {
        color: var(--white);
    }
}

:where(.descendant-colorway--primary-ultra-light .sketch),
.colorway--primary-ultra-light {
    background-color: var(--primary-ultra-light);
    color: var(--primary-semi-dark);
    border-color: var(--primary-light);

    a,
    svg {
        color: var(--primary-semi-dark);
    }
}

:where(.descendant-colorway--primary-light .sketch),
.colorway--primary-light {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    border-color: var(--primary-semi-light);

    a,
    svg {
        color: var(--primary-dark);
    }
}

:where(.descendant-colorway--primary-semi-light .sketch),
.colorway--primary-semi-light {
    background-color: var(--primary-semi-light);
    color: var(--primary-ultra-dark);
    border-color: var(--primary-semi-dark);

    a,
    svg {
        color: var(--primary-ultra-dark);
    }
}

:where(.descendant-colorway--primary-semi-dark .sketch),
.colorway--primary-semi-dark {
    background-color: var(--primary-semi-dark);
    color: var(--primary-ultra-light);
    border-color: var(--primary-dark);

    a,
    svg {
        color: var(--primary-ultra-light);
    }
}

:where(.descendant-colorway--primary-dark .sketch),
.colorway--primary-dark {
    background-color: var(--primary-dark);
    color: var(--primary-light);
    border-color: var(--primary-ultra-dark);

    a,
    svg {
        color: var(--primary-semi-light);
    }
}

:where(.descendant-colorway--primary-ultra-dark .sketch),
.colorway--primary-ultra-dark {
    background-color: var(--primary-ultra-dark);
    color: var(--primary-semi-light);
    border-color: var(--primary-semi-dark);

    a,
    svg {
        color: var(--primary-semi-light);
    }
}




:where(.descendant-colorway--secondary .sketch),
.colorway--secondary {
    background-color: var(--secondary);
    color: var(--white);
    border-color: var(--secondary-ultra-dark);

    a,
    svg {
        color: var(--white);
    }
}

:where(.descendant-colorway--secondary-ultra-light .sketch),
.colorway--secondary-ultra-light {
    background-color: var(--secondary-ultra-light);
    color: var(--secondary-semi-dark);
    border-color: var(--secondary-light);

    a,
    svg {
        color: var(--secondary-semi-dark);
    }
}

:where(.descendant-colorway--secondary-light .sketch),
.colorway--secondary-light {
    background-color: var(--secondary-light);
    color: var(--secondary-dark);
    border-color: var(--secondary-semi-light);

    a,
    svg {
        color: var(--secondary-dark);
    }
}

:where(.descendant-colorway--secondary-semi-light .sketch),
.colorway--secondary-semi-light {
    background-color: var(--secondary-semi-light);
    color: var(--secondary-ultra-dark);
    border-color: var(--secondary-semi-dark);

    a,
    svg {
        color: var(--secondary-ultra-dark);
    }
}

:where(.descendant-colorway--secondary-semi-dark .sketch),
.colorway--secondary-semi-dark {
    background-color: var(--secondary-semi-dark);
    color: var(--secondary-ultra-light);
    border-color: var(--secondary-dark);

    a,
    svg {
        color: var(--secondary-ultra-light);
    }
}

:where(.descendant-colorway--secondary-dark .sketch),
.colorway--secondary-dark {
    background-color: var(--secondary-dark);
    color: var(--secondary-light);
    border-color: var(--secondary-ultra-dark);

    a,
    svg {
        color: var(--secondary-semi-light);
    }
}

:where(.descendant-colorway--secondary-ultra-dark .sketch),
.colorway--secondary-ultra-dark {
    background-color: var(--secondary-ultra-dark);
    color: var(--secondary-semi-light);
    border-color: var(--secondary-semi-dark);

    a,
    svg {
        color: var(--secondary-semi-light);
    }
}








:where(.descendant-padding--xl .sketch),
.padding--xl {
    padding: var(--space-xl);
}

:where(.descendant-padding--l .sketch),
.padding--l {
    padding: var(--space-l);
}

:where(.descendant-padding--m .sketch),
.padding--m {
    padding: var(--space-m);
}

:where(.descendant-padding--s .sketch),
.padding--s {
    padding: var(--space-s);
}

:where(.descendant-padding--xs .sketch),
.padding--xs {
    padding: var(--space-xs);
}

:where(.descendant-border--border .sketch) {
    border-width: var(--border-width);
    border-style: var(--border-style);
}