@import "variables";

:host {
  .diff-container {
    position: relative;
    background-color: $blue-900;
    padding: 16px 0 0 16px;
    border-radius: 4px;

  .floating-buttons {
    flex-direction: row-reverse;
    position: absolute;
    z-index: 100;
    top: 16px;
    right: 22px;
    display: none;
    background-color: $blue-900;
    gap: 12px;

    sm-search {
      border-radius: 4px;
      color: $blue-280 !important;
      background-color: $blue-600 !important;
    }
  }

    &:hover {
      .floating-buttons {
        display: flex;
      }
    }

    .viewport {
      height: 100%;
      min-height: 250px;
      color: $white;
      &.disabled{
        color: $blue-400;
      }
      overflow-x: scroll;
      font-family: $font-family-monospace;

      .line {
        height: 22px;
        white-space: pre;
        ::selection {
          background-color: darken($neon-yellow, 20%);
        }
        .found {
          &::selection {
            background-color: $white;
            color: darken($neon-yellow, 20%);
          }
          background-color: darken($neon-yellow, 20%);
          border-radius: 4px;
          padding: 0 2px;
          &.current {
            background-color: darken($orangada, 10%);
            &::selection {
              background-color: $white;
              color: darken($orangada, 10%);
            }
          }
        }
      }
    }
  }
}
