/*==========================================================
  NEXIA FRAMEWORK
  THEME TOGGLE
==========================================================*/

/*--------------------------------------
  BUTTON
--------------------------------------*/

.nx-dark-toggle{

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    padding:0;
    margin:0;

    border:none;
    outline:none;

    background:transparent;

    color:var(--nx-text);

    cursor:pointer;

    border-radius:50%;

    transition:
        color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

}

/*--------------------------------------
  HOVER
--------------------------------------*/

.nx-dark-toggle:hover{

    color:var(--nx-primary);

    background:rgba(255,149,0,.08);

    box-shadow:
        0 0 12px rgba(255,149,0,.22);

}

/*--------------------------------------
  ACTIVE
--------------------------------------*/

.nx-dark-toggle:active{

    transform:scale(.92);

}

/*--------------------------------------
  FOCUS
--------------------------------------*/

.nx-dark-toggle:focus-visible{

    outline:2px solid var(--nx-primary);

    outline-offset:3px;

}

/*--------------------------------------
  ICONS
--------------------------------------*/

.nx-dark-toggle svg{

    position:absolute;

    width:20px;
    height:20px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

    transition:

        opacity .35s ease,

        transform .35s ease,

        color .25s ease;

}

/*==========================================================
  LIGHT MODE
==========================================================*/

.nx-icon-moon{

    opacity:1;

    transform:

        rotate(0deg)

        scale(1);

}

.nx-icon-sun{

    opacity:0;

    transform:

        rotate(-180deg)

        scale(.55);

}

/*==========================================================
  DARK MODE
==========================================================*/

html.nx-dark-mode .nx-icon-moon{

    opacity:0;

    transform:

        rotate(180deg)

        scale(.55);

}

html.nx-dark-mode .nx-icon-sun{

    opacity:1;

    transform:

        rotate(0deg)

        scale(1);

}

/*==========================================================
  HOVER ANIMATION
==========================================================*/

.nx-dark-toggle:hover svg{

    transform:scale(1.08);

}

html.nx-dark-mode .nx-dark-toggle:hover .nx-icon-sun{

    transform:

        rotate(0deg)

        scale(1.08);

}

html:not(.nx-dark-mode) .nx-dark-toggle:hover .nx-icon-moon{

    transform:

        rotate(0deg)

        scale(1.08);

}

/*==========================================================
  DARK MODE COLOUR
==========================================================*/

html.nx-dark-mode .nx-dark-toggle{

    color:var(--nx-text);

}

/*==========================================================
  LIGHT MODE COLOUR
==========================================================*/

html:not(.nx-dark-mode) .nx-dark-toggle{

    color:var(--nx-text);

}