pkg-components/stories/organisms/HeaderOptions/styles.module.css

.container {
  position: relative;
  display: flex;
  width: max-content;
}

.buttonOption {
  margin-left: 30px;
  position: relative;
  cursor: pointer;
  background: transparent;
  border: none;
}

.notificationCount {
  position: absolute;
  top: -10px;
  right: -5px;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  border-radius: 20px;
  background-color: var(--color-primary-red);
  color: var(--color-text-white);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floatingBox {
  position: absolute;
  display: grid;
  gap: 10px;
  padding: 10px;
  background-color: var(--color-base-white);
  transition: all 200ms ease-in-out;
  z-index: 99999;
}

.show {
  visibility: visible;
  transform: translateY(0);
}

.hidden {
  visibility: hidden;
  transform: translateY(-50px);
}

.floatingBoxTwo {
  margin-left: 30px;
  top: 28px;
  width: 250px;
  box-shadow: -1px 2px 8px 2px #dcdcdc;
  overflow: hidden;
}

.option {
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
}

.option:hover {
  background-color: #ffffff1a;
}