/***************************************************************
[Theme] Switch for the theme ===================================
***************************************************************/

.switch {
  display: flex;
  align-items: center;
  cursor: pointer;

  input {
    display: none;
  }

  input:checked~.icon-wrapper {
    .unchecked {
      opacity: 0;
      transform: rotate(360deg);
    }

    .checked {
      opacity: 1;
      transform: rotate(360deg);
    }
  }

  input:not(:checked)~.icon-wrapper {
    .unchecked {
      opacity: 1;
    }

    .checked {
      opacity: 0;
    }
  }
}

.icon-wrapper {
  position: relative;
  width: 24px;
  height: 24px;
}

.icon-wrapper svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}