@import '../../../styles/common.scss';

// a.container {
//   text-decoration: none;
//   color: inherit;
// }

.container {
  height: 70px;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 20px;

  &Link {
    text-decoration: none;
    color: inherit;
  }

  &.hasIcon {
    grid-template-columns: 1fr 40px;
  }

  background-color: var(
    --actions-navigation-bg-color,
    $actions-navigation-bg-color
  );

  user-select: none;

  &.context {
    background-color: var(
      --actions-context-bg-color,
      $actions-context-bg-color
    );
  }

  span {
    padding-left: 20px;

    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  &:hover {
    background-color: var(
      --actions-navigation-hover-color,
      $actions-navigation-hover-color
    );
    transition: background-color $confirmation-transition linear;
    cursor: pointer;

    &.context:not(.hasConfirm) {
      background-color: var(
        --actions-context-hover-color,
        $actions-context-hover-color
      );
    }
  }

  .icon {
    height: 30px;
    padding-right: 10px;
  }

  &.hasConfirm {
    background-color: var(
      --actions-confirmation-color,
      $actions-confirmation-color
    );
  }

  &.isDisabled {
    background-color: var(
      --page-header-action-disabled-bg-color,
      $page-header-action-disabled-bg-color
    );

    pointer-events: none;

    .icon {
      opacity: 0.5;
    }

    color: var(
      --page-header-action-disabled-fg-color,
      $page-header-action-disabled-fg-color
    );
  }

  & > div {
    @include confirmDialogFadeIn;
  }
}

.link {
  text-decoration: inherit;
  color: inherit;
}
