@import "~/styles/variables";

.button {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  fill: white;
  padding: 5px;
  box-sizing: border-box;
  cursor: pointer;
}

.dots {
  @include blur($content_bg, 5px, 0.7);

  padding: 5px 0 0 0;
  background: $content_bg;
  border-radius: $radius;
  width: 20px;
  height: 32px;
  position: relative;

  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    opacity: 0.5;
    transition: opacity 0.25s;

    :hover > & {
      opacity: 1;
    }
  }
}

.dropdown {
  @include dropdown_shadow;
  @include blur($red, 15px, 0.3);

  border-radius: $radius;
  padding: $gap;
  visibility: hidden;

  &.active {
    visibility: visible;
  }
}

.menu {
  display: grid;
  grid-auto-flow: row;
  fill: white;
  grid-row-gap: $gap;

  svg {
    fill: white;
    stroke: white;
    cursor: pointer;
  }
}

.sep {
  @include outer_shadow;
  height: 1px;
}