@use "sass:math";

$space-between: 25px;
$arrow-height: 24px;

.use-wrapper {
  background: transparent;
  margin-left: $space-between;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  &.fade {
    opacity: 0.3;
  }
}

.ref-block {
  display: block;
  box-sizing: content-box;
  position: relative;

  min-width: 120px;

  margin: $spacing-medium 0;
  padding: $spacing-medium;

  background-color: $live-value-background;

  color: $grey8;
  font-size: $code-font-size;

  &:first-child {
    margin-top: 0;
    margin-bottom: $spacing-medium;
  }

  &:before {
    position: absolute;
    font-size: $arrow-height;
    top: calc(50% - #{math.div($arrow-height, 2)});
  }

  &.used-in::before {
    @include font-awesome($fa-long-arrow-alt-left);
    left: -1 * ($space-between - 4px);
    color: $live-value-background;
  }

  &.refers-to::before {
    @include font-awesome($fa-long-arrow-alt-right);
    left: -1 * $space-between;
    color: $black2;
  }

  &:hover {
    cursor: pointer;
    color: $hover-foreground;
    background-color: darken($live-value-background, 10%);

    .cols .col .name,
    .cols .col .type {
      color: $hover-foreground;
    }

    &.used-in::before {
      color: darken($live-value-background, 10%);
    }
  }

  .dbheader,
  .typeheader,
  .fnheader {
    display: flex;
    width: 100%;
    align-items: center;

    &.fnheader-user i {
      color: $blue;
    }

    &.fnheader-pkg i {
      color: darken($grey8, 15%);
    }
  }

  .fnicon,
  .fnname,
  .typeicon,
  .typename,
  .dbheader i.fa,
  .dbname {
    display: inline-block;
  }

  .fnicon,
  .typeicon,
  .dbheader i.fa {
    color: $hover-foreground;
    font-size: 14px;
    height: 14px;
  }

  .fnname,
  .dbname,
  .typename {
    padding-left: 1ch;
  }

  .fields {
    display: block;
    width: max-content;
    color: $grey8;
    margin-left: 22px;
  }

  .field {
    display: block;

    font-size: 12px;
    color: darken($grey8, 15%);

    .name,
    .type {
      display: inline-block;
    }

    .type {
      margin-left: 1ch;
      &:before {
        content: ":";
        margin-right: 1ch;
      }
    }
  }

  &.handler {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .spec {
    display: inline-block;

    margin-left: 4ch;
    padding-bottom: 2px;
    padding-top: 0;
    padding-left: 1ch;
    padding-right: 1ch;

    width: max-content;

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

    &.space {
      color: $hover-foreground;
    }
  }

  .fnparam .has-blanks {
    color: lighten($red, 12%);
    font-style: italic;
  }
}
