@import '../../../global-styles.less';

@bghighlighted: rgb(38, 38, 38);
@bgfocused: rgb(66, 66, 66);
// @bgduplicate: rgb(48,1,1);
@bgselected: rgb(73, 72, 61);
@bghover: rgb(34, 34, 34);

@fontopen: rgb(255, 255, 255);
// @fontactive: rgb(3, 251, 53);
@fontactive: rgb(151, 195, 240);

:root {
  --similarityScaler: 5;
}

.pagerow {

  // color: @fontcolor;
  // font-weight: 200;
  padding-top: 0.1rem;
  min-height: 1.2rem;
  font-size: 0.8rem;
  padding-right: 0.3rem;
  white-space: nowrap;
  display: flex;
  gap: 0.6rem;
  // margin-left: 0.3rem;
  padding-left: 1rem;
  vertical-align: middle;
  align-items: center;
  user-select: none;

  // background-color: rgb(
  //   calc(
  //     (1 - var(--similarity)) * (255 - 255 * 0.1) + var(--similarity) * (255 * 0.5)
  //   ),
  //   calc(
  //     (1 - var(--similarity)) * (255 - 255 * 0.1) + var(--similarity) * (63 * 0.5)
  //   ),
  //   calc(
  //     (1 - var(--similarity)) * (255 - 255 * 0.1) + var(--similarity) * (255 - 63 * 0.5)
  //   )
  // );

  // background-color: @bgcolor;

  // background-color: @bgcolor;
  
  &__similarity-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgb(255, 60, 0); // Vibrant red/orange
    flex-shrink: 0;
    margin-right: -0.3rem; // pull it a bit closer to the checkbox
  }

  &__hoverbuttons {
    visibility: hidden;

    &:hover {
      color: orange;
    }
  }

  &:hover {
    background-color: @bghover;

    .pagerow__hoverbuttons {
      visibility: visible;
    }
  }

  &__tabtitle {
    flex: 1 1 60%;
    overflow: hidden;
    height: 100%;
    /* width: 60%;
        display: inline; */
  }

  &__favicon {
    width: 1rem;
    height: 1rem;
    // margin-right: 0.3rem;
  }

  &__selected {
    background-color: @bgselected;

    // .rs__value-container {
    //   background-color: @bgselected !important;
    // }
  }

  &__focused {
    background-color: @bgfocused;
  }

  &__open {
    color: @fontopen;
  }

  // A duplicate is basically 100% similar.  But also, add an icon
  // &__duplicate {
  //   background-color: @bgduplicate;
  // }

  &__active {
    color: @fontactive;
    // font-weight: 500;
  }

  // &__similar {
  //   background-color: rgb(139, 63, 63);
  // }

  &__tagicon {
    margin: 0.3rem;
  }

  &__noicon {
    width: 16px;
    height: 16px;
  }

  &__todoinline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  &__todotoggle {
    font-size: 0.55em;
    color: #888;
    cursor: pointer;
    padding: 0 2px;
    user-select: none;

    &:hover {
      color: #fff;
    }
  }

  // &:hover {
  //   background-color: @bghighlighted;

  //   .rs__value-container {
  //       background-color: @bghighlighted !important;
  //     }
  // }
}