/* Backgrounds */
.sw-bg-primary { background-color: var(--theme-primary) !important;}
.sw-bg-secondary { background-color: var(--theme-secondary) !important;}
.sw-bg-surface { background-color: var(--theme-surface) !important;}

/* borders */
.sw-border { border: 1px solid var(--border-color) !important;}

.sw-border-top {border-top: 1px solid var(--border-color) !important;}
.sw-border-bottom {border-bottom: 1px solid var(--border-color) !important;}
.sw-border-left {border-left: 1px solid var(--border-color) !important;}
.sw-border-right {border-right: 1px solid var(--border-color) !important;}

.sw-border-x { border-left: 1px solid var(--border-color) !important ; border-right: 1px solid var(--border-color) !important;}
.sw-border-y { border-top: 1px solid var(--border-color) !important ; border-bottom: 1px solid var(--border-color) !important;}

/* Primary */
.sw-border-p { border: 1px solid var(--theme-primary) !important;}

.sw-border-p-top {border-top: 1px solid var(--theme-primary) !important;}
.sw-border-p-bottom {border-bottom: 1px solid var(--theme-primary) !important;}
.sw-border-p-left {border-left: 1px solid var(--theme-primary) !important;}
.sw-border-p-right {border-right: 1px solid var(--theme-primary) !important;}

.sw-border-p-x { border-left: 1px solid var(--theme-primary) !important ; border-right: 1px solid var(--theme-primary) !important;}
.sw-border-p-y { border-top: 1px solid var(--theme-primary) !important ; border-bottom: 1px solid var(--theme-primary) !important;}

/* Secondary */
.sw-border-s { border: 1px solid var(--theme-secondary) !important;}

.sw-border-s-top {border-top: 1px solid var(--theme-secondary) !important;}
.sw-border-s-bottom {border-bottom: 1px solid var(--theme-secondary) !important;}
.sw-border-s-left {border-left: 1px solid var(--theme-secondary) !important;}
.sw-border-s-right {border-right: 1px solid var(--theme-secondary) !important;}

.sw-border-s-x { border-left: 1px solid var(--theme-secondary) !important ; border-right: 1px solid var(--theme-secondary) !important;}
.sw-border-s-y { border-top: 1px solid var(--theme-secondary) !important ; border-bottom: 1px solid var(--theme-secondary) !important;}

/* Shadows */
.no-shadow{ box-shadow: none !important; }

.raised{
    box-shadow: 0 3px 2px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sw-shadow-10px {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 
                0px 4px 5px 0px rgba(0, 0, 0, 0.14), 
                0px 1px 10px 0px rgba(0, 0, 0, .12);
}

.sw-shadow-10px-p {
    box-shadow: 0px 2px 4px -1px rgba(18, 13, 47, 0.2), 
                0px 4px 5px 0px rgba(18, 13, 47, 0.14), 
                0px 1px 10px 0px rgba(18, 13, 47, .12);
}

.sw-shadow-10px-s {
    box-shadow: 0px 2px 4px -1px rgba(236, 238, 241, 0.2),
                0px 4px 5px 0px rgba(236, 238, 241, 0.14),
                0px 1px 10px 0px rgba(236, 238, 241, .12);
}

/* Widths */
.w-10{ width: 10% !important;}
.w-25{ width: 25% !important;}
.w-50{ width: 50% !important;}
.w-75{ width: 75% !important;}
.w-100{ width: 100% !important;}
.w-150{ width: 150% !important;}
.w-200{ width: 200 !important;}

/* Height */
.h-10{ height: 10% !important;}
.h-25{ height: 25% !important;}
.h-50{ height: 50% !important;}
.h-75{ height: 75% !important;}
.h-100{ height: 100% !important;}
.h-150{ height: 150% !important;}
.h-200{ height: 200 !important;}