@import "~ui/styles/variables";

@hintbox-background-color: @gray-lighter;
@hintbox-spacing-vertical: 10px;
@hintbox-spacing-horizontal: 12px;
@hintbox-table-border-color: #BFC9CA;

.hintbox {
  padding: @hintbox-spacing-vertical @hintbox-spacing-horizontal;
  border-radius: 5px;
  margin-bottom: @hintbox-spacing-vertical;
  background-color: @hintbox-background-color;

  a {
    color: @link-color !important;

    &:hover {
      color: @text-color !important;
    }
  }

  pre {
    background-color: white;
  }

  &-label,
  &-label[ng-click] {
    cursor: help;
  }

  ul, ol {
    padding-left: 25px;
  }

  // inspired by Bootstrap alerts component
  // https://github.com/twbs/bootstrap/blob/063c1b0780ea0240e4adce4c88d57fc23e099475/less/alerts.less#L27-L35
  > * {
    margin: 0;
  }

  > * + * {
    margin-top: @hintbox-spacing-vertical;
  }

  // https://github.com/twbs/bootstrap/blob/2aa102bfd40859d15790febed1939e0111a6fb1a/less/tables.less#L88-L106
  .table-bordered {
    border: 1px solid @hintbox-table-border-color;
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th,
        > td {
          border: 1px solid @hintbox-table-border-color;
        }
      }
    }
    > thead > tr {
      > th,
      > td {
        border-bottom-width: 2px;
      }
    }
  }
}