@tailwind base;
@tailwind components;
@tailwind utilities;


/* from SoftUI */
.mask {
    background-size: cover;

    background-position: 50%;
    height: 100%;
    left: 0;
    /*opacity: .8;*/ /* set by tw*/
    position: absolute;
    top: 0;
    width: 100%
}

hr {
    border: 0;
    color: inherit;
    margin: 0;
    opacity: .25;
    height: 1px;

    background-color: transparent;
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .4), transparent)
}

/*themes*/
.bg-gradient-dark {
    background-image: linear-gradient(310deg, #141727, #3a416f)
}
.bg-gradient-sky {
    background-image: linear-gradient(310deg, #2152ff, #02c6f3)
}
.bg-gradient-magenta {
    background-image: linear-gradient(310deg, #7928ca, #d6006c)
}
.bg-gradient-light {
    background-image: linear-gradient(310deg, #627594, #8ca1cb)
}
.bg-gradient-yellow {
    background-image: linear-gradient(310deg, #f53939, #fac60b)
}
/*end themes*/

.bg-gradient-green {
    background-image: linear-gradient(310deg, #17ad37, #84dc14)
}

.bg-gradient-red {
    background-image: linear-gradient(310deg, #ea0606, #ff3d59)
}

.bg-milky-glass {
    -webkit-backdrop-filter: saturate(200%) blur(30px);
    backdrop-filter: saturate(200%) blur(30px);
    background-color: hsla(0, 0%, 100%, .8) !important;
    box-shadow: inset 0 0 2px hsla(0, 0%, 100%, .82)
}

.shadow-blur {
    box-shadow: inset 0 0 1px 1px hsla(0, 0%, 100%, .9), 0 20px 27px 0 rgba(0, 0, 0, .05) !important
}

/* toggle pill button */
.toggle-group {
    padding-left: 3rem;
}

.toggle-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.toggle-button, .toggle-label {
    cursor: pointer;
}

.toggle-group .toggle-button {
    background-color: rgba(58, 65, 111, .1);
    background-image: none;
    border: 1px solid #e9ecef;
    height: 1.25em;
    position: relative;
    width: 2.5rem;
    margin-left: -3rem;
    border-radius: 2.5rem;
    float: left;
    margin-top: 0.135em;
    vertical-align: top;
    transition: background-color .25s ease-in-out, border-color .25s ease-in-out;
}

.toggle-group .toggle-button:after {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 .25rem .375rem -.0625rem hsla(0, 0%, 8%, .12), 0 .125rem .25rem -.0625rem hsla(0, 0%, 8%, .07);
    content: "";
    height: 1rem;
    position: absolute;
    top: 1px;
    transform: translateX(1px);
    transition: transform .25s ease-in-out, background-color .25s ease-in-out;
    width: 1rem;
}

.toggle-group .toggle-button:checked {
    background-color: rgba(58, 65, 111, .95);
    border-color: rgba(58, 65, 111, .95);
}

.toggle-group .toggle-button:checked:after {
    transform: translateX(21px);
}
/* end toggle pill button */