/* Component: Notch */

.notch.bg-sand { background-color: var(--color-sand); }
.notch.bg-gray { background-color: var(--color-gray); }
.notch.bg-black { background-color: var(--color-black); }
.notch.bg-dark-sand { background-color: var(--color-dark-sand); }
.notch.bg-orange { background-color: var(--color-orange); }

.notch.sand .notch-left, .notch.sand .notch-right { background-color: var(--color-sand); }
.notch.sand .notch-center svg path { fill: var(--color-sand); }

.notch.gray .notch-left, .notch.gray .notch-right { background-color: var(--color-gray); }
.notch.gray .notch-center svg path { fill: var(--color-gray); }

.notch.black .notch-left, .notch.black .notch-right { background-color: var(--color-black); }
.notch.black .notch-center svg path { fill: var(--color-black); }

.notch.dark-sand .notch-left, .notch.dark-sand .notch-right { background-color: var(--color-dark-sand); }
.notch.dark-sand .notch-center svg path { fill: var(--color-dark-sand); }

.notch.orange .notch-left, .notch.orange .notch-right { background-color: var(--color-orange); }
.notch.orange .notch-center svg path { fill: var(--color-orange); }