.responsive-widget {
  display: flex;
  position: relative;
  transition-property: all;
  justify-content: center;
  align-items: flex-end;
  width: 1.5rem;
  height: 1.25rem;
  font-size: 1rem;

  .default-bg {
    background-color: #ffffff;

    @media (prefers-color-scheme: dark) {
      background-color: #2c333a;
      color: #e2e5e9;
    }
  }

  &--expanded {
    width: 1.5rem;
  }

  &__container {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    transition-property: all;
    transform-origin: left;
    border-radius: 0.25rem;

    &--expanded-up {
      right: 0;
      width: 1.75rem;
      height: 8.75rem;
    }

    &--not-expanded-up {
      right: 0;
      width: 1.75rem;
      height: 1.25rem;
    }

    &--expanded-right {
      top: 0;
      width: 8.75rem;
    }

    &--not-expanded-right {
      top: 0;
      width: 1.75rem;
    }

    .desktop-btn {
      display: flex;
      position: absolute;
      // bottom: 0;
      // left: 0;
      padding-left: 0.25rem;
      justify-content: center;
      align-items: center;
      width: 1.5rem;
      height: 1.25rem;
      border-radius: 0.25rem;
      cursor: pointer;

      &--active {
        z-index: 10;
        opacity: 1 !important;
        color: #6ca7ee;

        &--not-expanded-up {
          bottom: 0 !important;
        }

        &--not-expanded-right {
          left: 0 !important;
        }
      }

      &--hidden {
        pointer-events: none;
        opacity: 0;
      }

      &--expanded-up {
        bottom: 7rem;
      }

      &--expanded-right {
        left: 7rem;
      }
    }

    .laptop-btn {
      display: flex;
      position: absolute;
      padding-left: 0.25rem;
      transition-property: background-color, border-color, color, fill, stroke,
        opacity, box-shadow, transform;
      justify-content: center;
      align-items: center;
      width: 1.5rem;
      height: 1.25rem;
      border-radius: 0.25rem;
      cursor: pointer;

      &--active {
        pointer-events: auto !important;
        z-index: 10;
        opacity: 1 !important;
        color: #6ca7ee;

        &--not-expanded-up {
          bottom: 0 !important;
        }

        &--not-expanded-right {
          left: 0 !important;
        }
      }

      &--visible {
        opacity: 1;
      }

      &--hidden {
        pointer-events: none;
        opacity: 0;
      }

      &--expanded-up {
        bottom: 5.25rem;
      }

      &--expanded-right {
        left: 5.25rem;
      }
    }

    .tablet-btn {
      display: flex;
      position: absolute;
      padding-left: 0.25rem;
      transition-property: background-color, border-color, color, fill, stroke,
        opacity, box-shadow, transform;
      justify-content: center;
      align-items: center;
      width: 1.5rem;
      height: 1.25rem;
      border-radius: 0.25rem;
      cursor: pointer;

      &--active {
        pointer-events: auto !important;
        z-index: 10;
        opacity: 1 !important;
        color: #6ca7ee;

        &--not-expanded-up {
          bottom: 0 !important;
        }

        &--not-expanded-right {
          left: 0 !important;
        }
      }

      &--visible {
        opacity: 1;
      }

      &--hidden {
        pointer-events: none;
        opacity: 0;
      }

      &--expanded-up {
        bottom: 3.5rem;
      }

      &--expanded-right {
        left: 3.5rem;
      }
    }

    .mobile-landscape-btn {
      display: flex;
      position: absolute;
      padding-left: 0.25rem;
      transition-property: background-color, border-color, color, fill, stroke,
        opacity, box-shadow, transform;
      justify-content: center;
      align-items: center;
      width: 1.5rem;
      height: 1.25rem;
      border-radius: 0.25rem;
      cursor: pointer;

      &--active {
        pointer-events: auto !important;
        z-index: 10;
        opacity: 1 !important;
        color: #6ca7ee;

        &--not-expanded-up {
          bottom: 0 !important;
        }

        &--not-expanded-right {
          left: 0 !important;
        }
      }

      &--visible {
        opacity: 1;
      }

      &--hidden {
        pointer-events: none;
        opacity: 0;
      }

      &--expanded-up {
        bottom: 1.75rem;
      }

      &--expanded-right {
        left: 1.75rem;
      }
    }

    .mobile-portrait-btn {
      display: flex;
      position: absolute;
      padding-left: 0.25rem;
      transition-property: background-color, border-color, color, fill, stroke,
        opacity, box-shadow, transform;
      justify-content: center;
      align-items: center;
      width: 1.5rem;
      height: 1.25rem;
      border-radius: 0.25rem;
      cursor: pointer;

      &--active {
        pointer-events: auto !important;
        z-index: 10;
        opacity: 1 !important;
        color: #6ca7ee;

        &--not-expanded-up {
          bottom: 0 !important;
        }

        &--not-expanded-right {
          left: 0 !important;
        }
      }

      &--visible {
        opacity: 1;
      }

      &--hidden {
        pointer-events: none;
        opacity: 0;
      }

      &--expanded-up {
        bottom: 0rem;
      }

      &--expanded-right {
        left: 0rem;
      }
    }
  }
}
