@import "../../../../assets/scss/variables";

:root {
  --exodus-bg: #1A73E8;
}

:root[data-theme="dark"] {
  --exodus-bg: #0055AB;
}

/***
 ONLY STYLING FOR THE INNER CONTENT OF EACH COLUMN TYPE GOES HERE
 */
.list-column {
  $exodus-bg: var(--exodus-bg);
  $background-color-status-completed: var(--background-color-status-completed);
  $background-color-status-critical: var(--background-color-status-critical);
  $background-color-status-inactive: var(--background-color-status-inactive);
  $background-color-status-warning: var(--background-color-status-warning);
  $background-color-status-success: var(--background-color-status-success);
  $background-color-status-pending: var(--background-color-status-pending);
  $background-color-status-error: var(--background-color-status-error);
  $background-success-completed: var(--background-success-completed);
  flex: 1 1 0%;

  .text-column {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.4rem;
    text-align: inherit;
    color: $text-color;
    padding: 0 0.35vw;

    a {
      color: $title-color !important;
    }

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

    span, b {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &.highlight {
      display: inline;
      padding: 0.25em 0;
      background: #e3ac16;
      color: $main-color;
      box-shadow: 0.5em 0 0 #e3ac16, -0.5em 0 0 #e3ac16;
    }

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

  .popup-column {
    position: relative;
    padding: 0 0.35vw;

    &--toggle {
      position: relative;
      //z-index: 9999;

      cursor: pointer;

      img {
        filter: $svg-default;
      }
    }



    &--dropdown {
    text-align: left;
    position: absolute;

    z-index: 999999;

    min-width: 305px;
    width: max-content;
    max-width: calc(100vw - 30px);

    box-sizing: border-box;

    border: 1px solid #D9D9D9;
    padding: 50px 15px 15px;

    background-color: $rolebox-background;
    box-shadow: 0px 3px 6px #00000029;

    color: $text-color;
    font-size: 1.4rem;
    line-height: 2.7rem;

    & img.close-btn {
      position: absolute;
      right: 20px;
      top: 17px;
      cursor: pointer;
    }
  }




            //&.right {
    //  .popup-column--dropdown {
    //    left: auto;
    //    top: -14px;
    //    right: -15px;
    //
    //    & img.close-btn {
    //      position: absolute;
    //      left: 20px;
    //      top: 17px;
    //      cursor: pointer;
    //    }
    //  }
    //}

    &.open .popup-column--toggle {
      z-index: 999999999999;
    }

    &.disabled {
      pointer-events: none;

      .popup-column--toggle {
        img {
          filter: $svg-inactive;
        }
      }
    }

    &.empty {
      .popup-column--toggle {
        img {
          filter: $svg-inactive;
        }
      }
    }

    textarea {
      border: none;
      resize: none;
      width: 100%;
      min-height: 200px;
      background: $app-background;
      color: $text-color;
    }

    li {
      cursor: pointer;
    }

    button {
      margin: 0 auto;
      outline: none;
      border: none;
      min-width: 130px;
      height: 33px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: $main-color;
      color: $white;
      font-size: 1.1rem;

      &:disabled {
        background-color: #CCCCCC;

      }
    }


  }

  .status-column {
    padding: 0 0.35vw;
    height: 27px;
    display: contents;

    b {
      border-radius: 25px;
      @media (min-width: 1400px) {
        width: 100%;
      }
      max-width: 150px;
      padding: 0 10px;
      height: 27px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $white;
      font-size: 1rem;
      font-weight: 600;
    }

    &.squared {
      b {
        border-radius: 0px;
      }
    }

    &.pending {
      b {
        background-color: $background-color-status-pending;
        border: 1px solid $status-pending;
      }
    }

    &.cancel {
      b {
        background-color: $background-color-status-error;
        border: 1px solid $status-error;
      }
    }

    &.success {
      b {
        background-color: $background-color-status-success;
        border: 1px solid $status-success;
      }
    }

    &.critical {
      b {
        background-color: $background-color-status-critical;
        border: 1px solid $error-color;
      }

    }

    &.warning {
      b {
        background-color: $background-color-status-warning;
        border: 1px solid $status-warning;
      }
    }

    &.error {
      b {
        background-color: $background-color-status-critical;
        border: 1px solid $error-color;
      }
    }

    &.completed {
      b {
        background-color: $background-color-status-completed;
        border: 1px solid $status-completed;
      }
    }

    &.inactive {
      b {
        background-color: $background-color-status-inactive;
        border: 1px solid $status-inactive;
      }
    }

    &.submitted {
      b {
        background-color: #61C765;
        border: 1px solid #61C765;
      }
    }

    &.success_completed {
      b {
        border: 1px solid;
        background: linear-gradient(158deg, $background-color-status-completed 50%, $background-color-status-success 50%);
      }
    }

    &.empty {
      b {
        background-color: transparent;
        border: 1px solid transparent;
        color: $text-color;
      }
    }

    &.less-round {
      b {
        border-radius: 4px;
        @media (min-width: 1400px) {
          width: 100%;
        }

        padding: 7px 3px;
        height: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $white;
        font-size: 1rem;

      }

    }
  }

  .button-column {
    outline: none;
    border: none;
    padding: 0 8px;
    width: 100%;
    //min-width: 120px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $main-color;
    color: white;
    font-size: 1.1rem;

    &.main-color {
      background-color: $main-color;
    }

    &.secondary-color {
      background-color: $exodus-bg;
    }

    &:disabled {
      background-color: #CCCCCC;
      cursor: not-allowed;
      color: $quick-access-background;
    }

    &.resolved {
      background-color: $status-success;
    }

    &.submitted {
      background-color: #61C765;
    }

  }

  .icon-column {
    padding: 0 0.35vw;
    color: $text-color;
  }

  .download-column {
    .download-button {
      display: none;
      outline: none;
      border: none;
      padding: 0 8px;
      width: 100%;
      height: 33px;
      align-items: center;
      justify-content: center;
      background-color: $main-color;
      color: $white;
      font-size: 1.1rem;
    }

    &:hover {
      img {
        display: none;
      }

      .download-button {
        display: flex;
      }
    }

    &.disabled {
      img {
        filter: brightness(0) saturate(100%) invert(69%) sepia(15%) saturate(1%) hue-rotate(314deg) brightness(89%) contrast(100%);
        display: initial !important;
      }

      .download-button {
        display: none !important;
      }
    }
  }

  .indication-column {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 0.35vw;

    justify-content: flex-start !important;

    //justify-content: center;

    &--color-div {
      border-radius: 50%;
      width: 6px;
      height: 6px;
      margin-right: 6px;
    }

    &--text-div {
      color: $title-color;
      font-size: 1rem;
      font-weight: bold;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .pending {
      background-color: #1A73E8;
    }

    .cancel {
      background-color: #0C343D;
    }

    .success {
      background-color: $status-success;
    }

    .warning {
      background-color: $status-warning;
    }

    .error {
      background-color: #ee6969;
    }

    .completed {
      background-color: $status-completed;
    }

    .inactive {
      background-color: $status-inactive;
    }

    .success_completed {
      background: $status-completed;
      background: linear-gradient(158deg, $status-completed 50%, $status-success 50%);
    }
  }

  .hover-column {


    justify-content: center;
    align-items: center;
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #040F57 !important;
    color: white !important;
    border-radius: 6px;

    .box {
      padding: 0 20px;
      height: max-content !important;
      cursor: pointer;

      span {
        margin-top: 10px;
        width: 80px;
        font-size: 11px;
        font-weight: $bold;
      }
    }

    .left-box {

      border-right: 1px white dashed;
    }

    .left-box:last-child {
      border-right: none;
    }

    .left-box, .right-box {
      &:hover {
        cursor: pointer;
      }


    }
  }

  img {
    filter: $svg-default;
  }

}

.button-view .list-column {
  .text-column {
    white-space: normal;
    overflow: visible;

    .ellipsis {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    span,
    b {
      white-space: normal;
      overflow: visible;
    }
  }

  .hover-column {
    flex-wrap: wrap;
    height: 100% !important;
    min-height: 153px !important;

    &:hover {
      height: 100% !important;
      min-height: 153px !important;
    }

    .ellipsis {
      width: 100% !important;
      display: flex;
      flex-wrap: nowrap;
      //@media (max-width: 1500px) {
      // flex-direction: column;
      //}
    }

    .box {
      flex: 1 1 auto;
      //min-width: 60px;

      span {
        width: auto;
        white-space: normal;
        text-align: center;
      }
    }

    .left-box {
      //border-right: none;
      //border-bottom: none;
      //
      //@media (min-width: 1500px) {
      border-right: 1px white dashed;
      border-bottom: none;
      //}
    }

    .left-box:last-child {
      //border-right: none;
      //border-bottom: none;
      //
      //@media (min-width: 1500px) {
      border-right: none;
      border-bottom: none;
      //}
    }
  }
}