@import "variables";

.evo-page-header {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 30px;
  .page-title {
    width: 100%;
    width: calc(100% - 90px);
    min-height: 40px;
    @include ellipsis();
    > .title-txt {
      margin-right: 5px;
    }
    .evo-badge {
      position: relative;
      top: -4px;
    }
    .h-txt {
      margin-left: 5px;
      font-size: $text-font-size;
      font-weight: normal;
      color: $color-text-secondary;
    }
  }
  .title-icons {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    background-color: $bgcolor-background;
    > a {
      display: inline-block;
      border-radius: 50%;
      > .crud-icon {
        border: solid 1px transparent;
        > svg {
          fill: $color-icon;
        }
        > div {
          display: none;
        }
      }
      &.active > .crud-icon {
        border-color: $color-icon-active;
        cursor: default !important;
        > svg {
          fill: $color-text;
        }
      }
      &:hover {
        .crud-icon {
          > svg {
            fill: $color-icon-hover;
          }
          > div {
            display: block;
          }
        }
      }
    }
  }

  @media (max-width: $media-small) {
    .title-icons {
      display: none !important;
    }
    .page-title {
      width: 100%;
    }
  }
}
