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

.list-column {
  //text-align: center;
  flex: 1 1 0%;
  //white-space: nowrap;
  //position: relative;


  .text-column {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 10px;
    font-size: 1.4rem;
    text-align: inherit;
    color: $main-color;

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

    &.gray{
      color: $text-color;
    }

    &.small {
      font-size: 1.1rem;
    }

    &.medium {
      font-size: 1.2rem;
    }

    &.large {
      font-size: 1.4rem;
    }
  }

  .popup-column {
    position: relative;
    margin: 0 20px;

    &--toggle {
      position: relative;
      z-index: 9999;
      cursor: pointer;
    }

    &--dropdown {
      text-align: left;
      position: absolute;
      top: -10px;
      left: -15px;
      z-index: 999999;
      width: 305px;
      border: 1px solid #D9D9D9;
      padding: 50px 15px 15px;
      background-color: white;
      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;
        right: -15px;

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

      }
    }

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

    &.disabled {

      .popup-column--toggle {


        img {
          filter: $svg-inactive;
        }
      }
    }

    textarea {
      border: none;
      resize: none;
      width: 100%;
      min-height: 200px;
    }

    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;
      }

    }

    //STYLING OF ACTIONS LIST
    &.list-actions .actions {
      margin: -15px;

      ul {
        padding: 0;
        margin: 0;
      }

      ul li {

        color: $main-color;
        position: relative;

        font-size: 1.2rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        height: 36px;
        padding-left: 35px;

        &:not(:last-child) {
          //margin-bottom: 1.6rem;
        }

        &:before {

          left: 23px;
          position: absolute;
          content: "";
          height: 100%;
          width: 6px;
          background-repeat: no-repeat;
          background: url('../../../../assets/images/right-chevron.svg');
          background-position: center 14px;
          background-repeat: no-repeat;


        }

        &:hover {
          background: #0D60C8;
          color: white;

          &:before {
            filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(12%) hue-rotate(236deg) brightness(103%) contrast(100%);
          }
        }
      }
    }
  }

  .status-column {

    min-width: 133px;
    padding: 0 20px;
    padding-top: 3px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1A73E8;
    color: white;
    font-size: 0.9rem;

    &.pending {
      background-color: #1A73E8;
      font-weight: bold;
    }

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

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

    &.error {
      background-color: $status-error;
    }

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

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

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

    &:disabled {
      background-color: #CCCCCC;
    }
  }

  .icon-column {
    margin: 0 20px;
  }
}