#theme-selector {
  position: relative; }
  #theme-selector .addon-elem {
    position: absolute;
    right: -5px;
    bottom: -1px;
    background: var(--color-digital_func_green);
    width: 5px;
    height: 5px;
    z-index: 3;
    overflow: hidden;
    border-radius: 3px;
    content: 'A';
    display: none; }
    #theme-selector .addon-elem.active {
      display: block; }
  #theme-selector .auto-toggler {
    position: absolute;
    top: 0;
    padding: 6px 7px;
    width: 100%;
    left: calc(100% - 7.5px);
    z-index: 1;
    cursor: pointer;
    display: none; }
    #theme-selector .auto-toggler:hover {
      color: var(--color-cta); }
  #theme-selector .toggler {
    border: 1px solid var(--border-color);
    border-radius: 40px;
    width: 43px;
    height: 21px;
    position: relative;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20fill='%23ccc'%20d='M375.7%2019.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8%202.4L256%2061.1%20173.5%204.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9%209.8-14.4%2017.8l-18.1%2098.5L19.7%20136.3c-8%201.5-14.7%206.9-17.8%2014.4s-2.2%2016.1%202.4%2022.8L61.1%20256%204.2%20338.5c-4.6%206.7-5.5%2015.3-2.4%2022.8s9.8%2013%2017.8%2014.4l98.5%2018.1%2018.1%2098.5c1.5%208%206.9%2014.7%2014.4%2017.8s16.1%202.2%2022.8-2.4L256%20450.9l82.5%2056.9c6.7%204.6%2015.3%205.5%2022.8%202.4s12.9-9.8%2014.4-17.8l18.1-98.5%2098.5-18.1c8-1.5%2014.7-6.9%2017.8-14.4s2.2-16.1-2.4-22.8L450.9%20256l56.9-82.5c4.6-6.7%205.5-15.3%202.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1L375.7%2019.7zM269.6%20110l65.6-45.2%2014.4%2078.3c1.8%209.8%209.5%2017.5%2019.3%2019.3l78.3%2014.4L402%20242.4c-5.7%208.2-5.7%2019%200%2027.2l45.2%2065.6-78.3%2014.4c-9.8%201.8-17.5%209.5-19.3%2019.3l-14.4%2078.3L269.6%20402c-8.2-5.7-19-5.7-27.2%200l-65.6%2045.2-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3L64.8%20335.2%20110%20269.6c5.7-8.2%205.7-19%200-27.2L64.8%20176.8l78.3-14.4c9.8-1.8%2017.5-9.5%2019.3-19.3l14.4-78.3L242.4%20110c8.2%205.7%2019%205.7%2027.2%200zM256%20368a112%20112%200%201%200%200-224%20112%20112%200%201%200%200%20224zM192%20256a64%2064%200%201%201%20128%200%2064%2064%200%201%201-128%200z'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position-x: 16% !important;
    background-position-y: center !important;
    background-size: 28% !important; }
    #theme-selector .toggler:hover {
      border: 1px solid var(--color-cta); }
      #theme-selector .toggler:hover .toggle-control {
        background: var(--color-cta); }
    #theme-selector .toggler .toggle-control {
      position: absolute;
      width: 17px;
      height: 17px;
      background: var(--svg-ico-fill);
      border-radius: 20px;
      overflow: hidden;
      transition: all 100ms linear;
      right: 2px;
      top: 2px; }
  #theme-selector.dark .toggler {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20384%20512'%3E%3Cpath%20fill='%23ccc'%20d='M223.5%2032C100%2032%200%20132.3%200%20256S100%20480%20223.5%20480c60.6%200%20115.5-24.2%20155.8-63.4c5-4.9%206.3-12.5%203.1-18.7s-10.1-9.7-17-8.5c-9.8%201.7-19.8%202.6-30.1%202.6c-96.9%200-175.5-78.8-175.5-176c0-65.8%2036-123.1%2089.3-153.3c6.1-3.5%209.2-10.5%207.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position-x: 84% !important;
    background-position-y: 41% !important;
    background-size: 28% !important; }
    #theme-selector.dark .toggler .toggle-control {
      left: 2px;
      top: 2px; }
  #theme-selector:hover .auto-toggler {
    display: flex; }

.dark-theme #theme-selector .toggler {
  border: 1px solid var(--border-color); }