.m-toggle-darkmode {
  position: fixed;
  right: $mobile-space;
  bottom: 45px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;

  @include respond-to('medium') {
    position: relative;
    right: auto;
    bottom: auto;
    margin-left: 20px;
    z-index: auto;
  }

  input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    @extend .no-appearance;
    @extend .focusable;
  }

  input::-moz-focus-inner { 
    border: 0; 
  }

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--toggle-darkmode-background-color);
    z-index: 1;
  }

  span {
    color: var(--titles-color);
    font-size: 0.9375rem;

    &.moon {
      display: var(--toggle-darkmode-button-display-moon);
    }

    &.sun {
      display: var(--toggle-darkmode-button-display-sun);
    }
  }
}

_:-ms-fullscreen, :root .m-toggle-darkmode {
  display: none;
}
