@import "variables";

:host {
  height: 18px;
  user-select: none;
  display: flex;

  .id-number {
    display: flex;
    align-items: center;
    color: $blue-250;
    background-color: $blue-600;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;

    .hash {
      padding: 0 6px;
      font-family: $font-family-monospace;
      font-size: 12px;

      .three-dots {
        font-family: initial;
        margin-left: 2px;
      }
    }

    .id-rect {
      fill: $blue-300;
    }

    .id-text {
      fill: $blue-600;
    }

    &:hover {
      .id-rect {
        fill: $blue-250;
      }
    }
  }
}

:host-context(.light-theme) {
  :host {
    .id-number {
      color: $blue-400;
      background-color: $blue-50;

      .id-rect {
        fill: $blue-400;
      }

      .id-text {
        fill: $blue-50;
      }
      &:hover {
        .id-rect {
          fill: $blue-500;
        }
      }
    }
  }
}
