/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Bug 1869845 - Styles in this file are still experimental!  */

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;

  > .beforeList {
    margin: 20px;

    .searchContainer {
      margin-block-start: 8px;
      padding: 8px;
      cursor: text;
      border-radius: 4px;
      border: 1px solid var(--in-content-border-color);
      box-sizing: border-box;
      width: 100%;
      display: flex;

      &:focus-within{
        outline: 1px auto;
      }
    }

    .searchIcon{
      background-image: url(chrome://global/skin/icons/search-textbox.svg);
      background-position: center;
      background-repeat: no-repeat;
      fill: currentColor;
      width: 18px;
      margin-inline-end: 4px;
      flex-shrink: 0;
    }

    .search {
      border: none;
      background-color: transparent;
      outline: none;
      min-width: 0;
      flex-grow: 1;
    }
  }
}

virtualized-list {
  position: relative;
  overflow: auto;
  margin-block: 20px;
  padding-inline: 20px;
  flex-grow: 1;
  .lines-container {
    padding-inline-start: unset;
  }
}

.line {
  display: flex;
  align-items: stretch;
  position: absolute;
  width: calc(100% - 40px);
  user-select: none;
  box-sizing: border-box;
  height: 64px;

  background-color: var(--in-content-box-background-odd);
  border-inline: 1px solid var(--in-content-border-color);

  color: var(--in-content-text-color);

  &.start {
    border-block-start: 1px solid var(--in-content-border-color);
    border-start-start-radius: 8px;
    border-start-end-radius: 8px;
  }

  &.end {
    border-block-end: 1px solid var(--in-content-border-color);
    border-end-start-radius: 8px;
    border-end-end-radius: 8px;
    height: 54px;
  }

  > .menuButton {
    position: relative;
    visibility: hidden;

    > button {
      border: none;
      margin-inline-start: 2px;
      padding: 2px;
      background-color: transparent;
      /* Fix: too lazy to load the svg  */
      width: 32px;
      color: unset;
    }

    > .menuPopup {
      position: absolute;
      inset-inline-end: 0;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
      background-color: var(--in-content-table-background);
      padding: 4px;

      > .separator {
        border-block-start: 1px solid var(--in-content-border-color);
        margin: 4px 0;
      }

      > button {
        text-align: start;
        border-style: none;
        padding: 12px;
        margin-block-end: 2px;
        width: 100%;
        text-wrap: nowrap;
      }
    }
  }

  > .content {
    flex-grow: 1;

    &:not(.section) {
      display: grid;
      grid-template-rows: max-content 1fr;
      grid-template-columns: max-content;
      grid-column-gap: 8px;
      padding-inline-start: 8px;
      padding-block-start: 4px;
    }

    > div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:last-child {
        padding-block-end: 10px;
      }
    }

    > .icon {
      margin-inline-start: 4px;
      width: 16px;
      height: 16px;
      -moz-context-properties: fill;
      fill: currentColor;
    }

    > .label {
      color: var(--text-color-deemphasized);
      padding-block: 2px 4px;
      grid-row: 1;
      align-content: end;
    }

    > .value {
      user-select: text;

      > .icon {
        -moz-context-properties: fill;
        fill: currentColor;
        width: auto;
        height: 16px;
        margin-inline-end: 4px;
        vertical-align: text-bottom;
      }

      > .icon:not([src]) {
        display: none;
      }

      &:is(a) {
        color: currentColor;
      }
    }

    > .stickers {
      grid-row: 1;
      align-content: start;

      > span {
        padding: 4px;
        margin-inline-end: 2px;
        border-radius: 24px;
        font-size: xx-small;
      }

      /* Hard-coded colors will be addressed in FXCM-1013 */
      > span.risk {
        background-color: slateblue;
        border: 1px solid darkslateblue;
        color: whitesmoke;
      }

      > span.warning {
        background-color: firebrick;
        border: 1px solid maroon;
        color: whitesmoke;
      }

      > span.error {
        background-color: orange;
        border: 1px solid orangered;
        color: black;
      }
    }

    &.section {
      font-size: larger;

      > .label {
        display: inline-block;
        margin: 0;
        color: unset;
      }

      > .value {
        margin-inline-end: 8px;
        text-align: end;
        font-size: smaller;
        color: var(--text-color-deemphasized);
        user-select: unset;
      }
    }
  }

  &.selected {
    color: var(--in-content-item-selected-text);
    background-color: var(--in-content-item-selected);

    > .menuButton {
      visibility: inherit;
    }
  }

  &:hover {
    color: var(--in-content-item-hover-text);
    background-color: var(--in-content-item-hover);

    > .menuButton {
      visibility: visible;
    }
  }
}

/* Dialog styles */
.dialog-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  /* TODO: probably want to remove this later ? */
  backdrop-filter: blur(6px);
}

.dialog-container {
  display: grid;
  padding: 16px 32px;
  color: var(--in-content-text-color);
  background-color: var(--in-content-box-background);
  border: 1px solid var(--in-content-border-color);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

.dialog-title {
  margin: 0;
}

.dismiss-button {
  justify-self: end;
}

.dialog-content {
  margin-block-start: 16px;
  margin-block-end: 16px;

  .checkbox-text {
    margin-block-start: 8px;
  }
}