@import "src/styles/variables";
@import "src/styles/mixins";

@mixin button {
  margin: 0 $gap;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    fill: darken(white, 50%);
    transition: fill 0.25s;
  }

  &:hover {
    svg {
      fill: $red;
    }
  }

  &::after {
    content: ' ';
    flex: 0 0 6px;
    height: $gap;
    width: 6px;
    border-radius: 4px;
    background: transparentize(black, 0.7);
    margin-left: $gap * 2;
  }
}

.editor_buttons {
  flex: 0;
  padding-right: $gap;
  fill: transparentize(white, 0.7);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  & > * {
    @include button;
  }

  @include tablet {
    align-self: center;
    display: none;

    & > * {
      &:last-child {
        margin-right: 0;

        &::after {
          display: none;
        }
      }

      &:first-child {
        margin-left: 0;
      }
    }
  }
}


.star {
  transition: fill, stroke 0.25s;
  will-change: transform;

  .is_heroic {
    svg {
      fill: $orange;
    }
  }

  &:hover {
    fill: $orange;
  }
}

.editor_menu_button {
  display: none !important;

  @include button();

  @include tablet {
    display: flex !important;
  }
}

.editor_menu {
  &:hover {
    .editor_buttons {
      @include tablet {
        display: flex;
        position: absolute;
        right: 0;
        top: 100%;
        background: darken($content_bg, 4%);
        padding: $gap * 2;
        border-radius: $radius;
        box-shadow: transparentize(black, 0.8) 5px 5px 5px;
        transform: translate(0, -10px);
        z-index: 10;
      }
    }
  }
}