@import "import";

.login {
  z-index: 1;
}

.wrapper {
  display: flex;
  justify-content: flex-end;
}

.roundedImage {
  width: 35px;
  height: 35px;
  outline: solid;
  outline-color: white;
  outline-width: 1px;
  border-radius: var(--border-radius-circle);
  overflow: hidden;
  cursor: pointer;
  margin: var(--spacer-2) var(--spacer-2) 0 0;

  &:focus-visible {
    outline: 2px color(blue) solid;
  }
}

.loginOptions {
  position: absolute;
  display: flex;
  width: 188px;
  padding: var(--spacer-4) 0 0 var(--spacer-4);
  border-radius: var(--border-radius-3);
  background-color: color(white);
  z-index: -1;
  pointer-events: none;
  transform-origin: 163px 31px;
  * {
    font-family: var(--font-family-sans-serif);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 650;
    line-height: 2.2rem;
    letter-spacing: -0.022rem;
  }

  li {
    cursor: pointer;
    margin-bottom: var(--spacer-3);
  }
  li,
  a,
  button {
    &:focus-visible {
      outline: 2px blue solid;
    }
  }
}

.showOptions {
  pointer-events: all;
}