/* ============================================================================
   06-COMPONENTS -> #THEME-SWITCH
   ========================================================================= */

/**
 * 
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Theme switch
 *
 * 1. Set the 'border-radius' to be exactly half of the height to ensure it is
 *    always perfectly curved.
 */

.theme-switch {
    --theme-switch-bg: var(--form-option-bg);
    --theme-switch-height: var(--space-5);
    --theme-switch-icon-bg: var(--color-white);
    --theme-switch-icon-offset: .125rem;
    --theme-switch-icon-size: var(--space-4);
    --theme-switch-label-color: var(--form-label-color);
    --theme-switch-label-font-weight: var(--form-label-font-weight);
    --theme-switch-width: var(--space-9);
    --theme-switch-active-bg: var(--form-option-active-bg);

    appearance: none;
    background-color: var(--theme-switch-bg);
    border: 0;
    border-radius: calc(var(--theme-switch-icon-size) / 2); // [1]
    cursor: pointer;
    display: flex;
    flex-direction: row;
    height: var(--theme-switch-height);
    overflow: hidden;
    position: relative;
    width: var(--theme-switch-width);
    z-index: var(--z-index-10);

    &[data-theme=dark] {
        .theme-switch__icon {
            transform: translateX(100%);
        }
    }
    
    &[data-theme=light] {
        .theme-switch__icon-inner {
            transform: scale(.5);

            &:before {
                animation-delay: 150ms;
                animation-direction: normal;
                animation-duration: 300ms;
                animation-fill-mode: forwards;
                animation-name: sun-beams;
                animation-timing-function: ease-in-out;
            }

            &::after {
                transform: translate(100%, -100%)
            }
        }
    }
}


/**
 * Theme switch icon
 *
  * 1. Set the 'border-radius' to be exactly half of the height to ensure it is
 *     always perfectly curved.
 */

.theme-switch__icon {
    @include transition(('transform'));
    align-items: center;
    background-color: var(--theme-switch-icon-bg);
    border-radius: calc(var(--theme-switch-icon-size) / 2); // [1]
    content: '';
    display: flex;
    height: var(--theme-switch-icon-size);
    justify-content: center;
    overflow: hidden;
    top: var(--theme-switch-icon-offset);
    left: var(--theme-switch-icon-offset);
    position: absolute;
    width: var(--theme-switch-icon-size);
    z-index: -1;
}


/**
 * Theme switch icon inner
 */

.theme-switch__icon-inner {
    @include transition(('transform'));
    background-color: var(--theme-switch-bg);
    border-radius: var(--rounded-md);
    height: var(--space-3);
    width: var(--space-3);

    &::before {
        @include transition(('transform', 'opacity'));
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath stroke='%237F56D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%237F56D9' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
        background-size: contain;
        content: '';
        height: var(--space-3);
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%) scale(0);
        width: var(--space-3);
        will-change: transform;
    }

    &::after {
        @include transition(('transform'));
        background-color: var(--color-white);
        border-radius: var(--rounded-md);
        content: '';
        height: var(--space-3);
        position: absolute;
        transform: translate(-10%, -25%);
        width: var(--space-3);
        will-change: transform;
    }
}

@keyframes sun-beams {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(1.75) rotate(-15deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(2) rotate(0deg); }
}