// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/variables';
@import 'src/styles/mixins';
@import 'src/styles/themes';

$iconSize: 14px;

.pcs-renderer-cell {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 12*$grid-size; // fluent management-list-row-height
  .pcs-renderer-icon {
    margin-right: 10px;

    svg { @include square-px-rem($iconSize); }
  }

  .pcs-renderer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    @include rem-fallback(height, 40px); // TODO: Needs to be set in a variable mapped to the PCS grid

    svg { @include square-px-rem(16px); }
  }

  .pcs-renderer-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &.uppercase { text-transform: uppercase; }

    > .icon-only { display: none !important; }
  }

  .soft-select-text,
  .pcs-renderer-time-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .soft-select-link {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: inline-block;
    height: 100%; // center align vertically
    font-family: inherit;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    @include rem-fallback(margin, 4px, 0px);
    @include rem-font-size(14px);

    &:hover,
    &:focus { text-decoration: none; }
  }

  .glimmer-icon {
    svg {
      @include square-px-rem(10px);
      @include rem-fallback(margin-left, -10px);
      @include rem-fallback(margin-top, -18px);
    }
  }

  @include themify($themes) {
    .pcs-renderer-icon {
      margin-right: 10px;

      svg {
        fill: themed('colorCellRendererSvgFill');

        .disabled-icon {
          stroke: themed('colorCellRendererSvgFill');

          .cls-2 { stroke: themed('colorGridRowBackground'); }
        }
      }
    }

    .pcs-renderer-link svg { fill: themed('colorCellRendererSvgFill'); }
    .pcs-renderer-link:hover svg { fill: themed('colorCellRendererSvgFillHighlight'); }

    .pcs-renderer-text { color: themed('colorCellRendererText'); }

    &.highlight {
      .pcs-renderer-icon svg {
        fill: themed('colorCellRendererSvgFillHighlight');

        .disabled-icon { stroke: themed('colorCellRendererSvgFillHighlight'); }
      }

      .pcs-renderer-text { color: themed('colorCellRendererTextHighlight'); }
    }

    .glimmer-icon svg { fill: themed('colorGlimmerSvgFill'); }

    .soft-select-text { color: themed('colorGridCellText'); }
  }
}

.ag-row {
  @include themify($themes) {

    &.ag-row-hover,
    &.ag-row-focus {
      .pcs-renderer-cell .pcs-renderer-icon svg .disabled-icon .cls-2 { stroke: themed('colorGridRowHoverBackground'); }
    }
  }
}
