@use '../../../../../scss/tools' as *;

.comment-header {
  position: relative;

  &__avatar {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    object-fit: cover;
  }

  &__author,
  &__date {
    max-width: calc(
      100% - 110px
    ); // Leave room for actions to the right and avatar to the left
    margin: 0;
    margin-inline-start: 45px;
    font-weight: 600;
    font-size: 14px;
    line-height: 130%;
    color: theme('colors.text-label');
  }

  &__date {
    color: theme('colors.text-meta');
  }

  &__actions {
    position: absolute;
    inset-inline-end: 0;
  }

  &__action {
    float: inline-start;
    margin-inline-start: 5px;
    border-radius: 5px;
    width: 30px;
    height: 30px;

    > button,
    > details > summary {
      border-radius: theme('borderRadius.sm');
      list-style-type: none; // Hides triangle on Firefox
      width: 30px;
      height: 30px;
      position: relative;
      background-color: unset;
      border: unset;
      padding: 0;

      @include more-contrast-interactive();

      &::-webkit-details-marker {
        display: none; // Hides triangle on Chrome
      }

      svg {
        position: absolute;
        top: 7.5px;
        inset-inline-start: 7.5px;
        width: 15px;
        height: 15px;
      }

      &:hover {
        cursor: pointer;
      }
    }

    > details {
      position: relative;

      > div {
        position: absolute;
        inset-inline-end: 0;
        top: 35px;
      }
    }

    &--more {
      > button,
      > details > summary {
        color: theme('colors.text-meta');
      }
    }
  }

  &__more-actions {
    background-color: theme('colors.surface-menus');
    color: theme('colors.text-label-menus-default');
    position: absolute;
    z-index: 1000;
    list-style: none;
    text-align: start;
    border-radius: 3px;

    &:before {
      content: '';
      border: 6px solid transparent;
      border-bottom-color: theme('colors.surface-menus');
      display: block;
      position: absolute;
      bottom: 100%;
      inset-inline-end: 9px;
    }

    button {
      display: block;
      background: none;
      border: 0;
      color: theme('colors.text-label-menus-default');
      padding: 5px 10px;
      font-size: 13px;
      width: 100px;
      text-align: start;
      cursor: pointer;
    }
  }
}

.comment--mode-deleting .comment-header,
.comment-reply--mode-deleting .comment-header {
  opacity: 0.5;
}
