.user-menu {
  button {
    background-color: transparent;
    margin-right: 24px;
    transition: transform 0.3s ease;

    &.focus-visible {
      border: 1px solid $ui-vibrant-blue-10;
      border-right: 0;
    }
    &:focus:has(+ .dropdown-button__options--opened) {
      .icon {
        svg {
          transform: rotate(180deg);
          transition: transform 0.25s ease;
        }
      }
    }

    svg {
      transition: transform 0.25s ease;
    }

    &:hover svg {
      animation: bounceDown 0.3s ease-in-out;
    }

    @keyframes bounceDown {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(3px);
      }
    }
  }

  .dropdown-button__options {
    padding: $pad-small;
    right: 10px;
    margin-top: 2px;

    button {
      display: inline-block;
      min-width: 125px;

      &:hover,
      &:focus {
        background-color: $ui-vibrant-blue-10;
        color: $core-fleet-black;
      }
    }

    .dropdown-button__option:last-child,
    .dropdown-button__option:nth-last-child(2) {
      border-top: 1px solid $ui-fleet-black-10;
    }
  }
}