.switch {
  position: relative;
  user-select: none;
  z-index: 2;
  padding: 8px 36px 8px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--secondary-text-color);
  transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;

  .content {
    padding-right: 8px;
  }

  .wrapper {
    color: var(--secondary-text-color);
    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;

    .icon {
      position: absolute;
      bottom: 0.65em;
      right: 18px;
      width: 0.5em;
      height: 0.5em;
      display: inline-block;
      vertical-align: middle;
      border-left: 0.15em solid currentColor;
      border-bottom: 0.15em solid currentColor;
      border-right: 0.15em solid currentColor;
      border-top: 0.15em solid currentColor;
      transform: translate(0, -0.15em) rotate(-45deg);
      transition: right cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s,
        background-color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
    }
    .line {
      position: absolute;
      bottom: 1.1em;
      right: 6px;
      width: 18px;
      height: 0.15em;
      display: inline-block;
      vertical-align: middle;
      background-color: currentColor;
      z-index: -1;
    }
  }

  &.active {
    color: var(--text-color);
    .wrapper {
      color: var(--text-color-full);
      .icon {
        background-color: currentColor;
        right: 0;
      }
    }
  }
}
