@import "../variables";
@import "mixins";

.widgets {
  .flex-container;
  flex-wrap: wrap;
  margin: 3.5rem -3.5rem 3.5rem;

  .widget-wrapper {
    //padding: 0 3.5rem 7rem;
    //-webkit-transform: translateZ(0);
    //transform: translateZ(0);
    padding: 3.5rem 3.5rem;
    transition: 0.1s;

    .widget-block {
      background: fade(white, 60%);
      border: 1px solid @program-panel-border-color;
      border-radius: 3rem;

      .widget-header {
        .flex-container;
        .flex-container-alignment(center, space-between);
        height: 13rem;
        padding: 0 5rem;

        h3 {
          color: @program-exuding-color;
          font-size: 5.75rem;
          font-weight: 300;
          margin: 0;

          &.widget-select-wrapper {
            .flex-container;
            line-height: 6rem;

            .widget-select {
              .flex-container;
              margin-left: 5rem;

              .dropdown-toggle {
                border-bottom: none;
                color: @program-hover-color;
                font-size: 5rem;
                line-height: 6rem;
                margin-bottom: -1rem;
                padding: 0 3rem 0 0;

                .caret {
                  color: @program-input-placeholder-hover-color;
                }
              }

              .dropdown-menu {
                min-width: 44rem;
              }
            }
          }
        }

        .widget-menu {

          .widget-menu-btn {
            .flex-container;
            background: transparent;
            border: none;
            margin: 0;
            padding: 0;

            .base-icon {
              .icon-sizing(4rem, 4rem, -4rem, -5rem);
              color: @program-main-color;
            }
          }

          .widget-menu-list {
            .menu-list(6.5rem, inherit, -2rem, 46rem);
          }
        }
      }

      .widget-body-wrapper {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        border-bottom-left-radius: 3rem;
        border-bottom-right-radius: 3rem;
        overflow: hidden;

        .widget-body {
          border-bottom-left-radius: 3rem;
          border-bottom-right-radius: 3rem;
          height: 53rem;
          overflow-y: auto;

          table {
            width: 100%;

            thead {

              tr {
                background-color: fade(white, 40%);
                color: @program-exuding-color;
                font-size: 3.5rem;
                height: 9rem;

                th {
                  font-weight: 400;
                  padding: 0 1rem;
                  text-transform: uppercase;
                  white-space: nowrap;

                  .ordered-cell {
                    .flex-container;
                    .flex-container-alignment(center, flex-start);

                    .order-icon {
                      .icon-sizing(2rem, 2rem, -5rem, -6rem);
                      color: @program-light-color;
                      cursor: pointer;
                      margin-left: 2rem;
                      margin-top: 0.25rem;

                      &.active {
                        color: @program-exuding-color;
                      }

                      &.rotate-icon {
                        transform: rotate(180deg);
                      }
                    }
                  }

                  &:first-child {
                    padding-left: 5rem;
                  }
                }
              }
            }

            tbody {

              tr {
                color: @program-main-color;
                font-size: 3.25rem;
                height: 9rem;

                td {
                  padding: 0 1rem;

                  .empty-table {
                    color: @program-empty-color;
                    text-align: center;
                  }

                  &:first-child {
                    padding-left: 5rem;
                    position: relative;
                  }

                }

                &:nth-child(even) {
                  background-color: fade(white, 40%);
                }
              }
            }
          }

          .widget-loading {
            .flex-container;
            .flex-container-alignment(center, center);
            color: @program-empty-color;
            height: 100%;
          }
        }
      }
    }

    &.widget-small {
      width: 50%;
    }

    &.widget-big {
      width: 100%;
    }

    &.drag-not-possible {

      .widget-block {
        box-shadow: 0 0 10px 3px rgb(255, 95, 95);
        background-color: rgba(255, 95, 95, 0.6);
      }
    }
  }

  .widget-long-item-wrapper {
    max-width: 32rem;

    .table-long-item {

      .table-long-item-text {
        font-size: 3.25rem;
      }
    }
  }
}



.payments-widget {

  tr.transaction-blocked {
    background-color: @history-transaction-blocked-border-color !important;
    color: @history-transaction-blocked-text-color !important;

    .transaction-status-indicator {

      .status-graph {

        &.income {
          stroke: @history-transaction-blocked-status-income-color !important;
        }

        &.outgoing {
          stroke: @history-transaction-blocked-status-outgoing-color !important;
        }
      }

      .status-inner {

        .base-icon.income {
          color: @history-transaction-blocked-status-income-color !important;
        }

        .base-icon.outgoing {
          color: @history-transaction-blocked-status-outgoing-color !important;
        }
      }
    }
  }

  .payments-marker {

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      border-left: 1rem solid @marker-light-green;
    }
  }

  .transaction-status-indicator {

    .mined-icon {
      font-size: 11rem;

      &:before {
        top: -2.5rem;
        left: -3.5rem;
      }
    }
  }

  .payments-comment-wrapper {
    .flex-container;
    .flex-container-alignment(center, flex-start);
    max-width: 9rem;

    .base-icon {
      .icon-sizing(5rem, 5rem, -3.5rem, -4.5rem);

      &:hover {
        color: @program-hover-color;
        cursor: pointer;
      }
    }
  }
}

.contacts-widget {

  tr {

    td:last-child {
      width: 20rem;
    }

    &:hover {

      .contact-options-btn-wrapper {
        visibility: visible;
      }
    }
  }

  .contact-name {
    .flex-container;
    .flex-container-alignment(center, flex-start);
    font-size: 3.25rem;
    white-space: nowrap;

    .base-icon {
      .icon-sizing(4rem, 4rem, -4rem, -5rem);
      color: @program-table-icon-color;
      margin-right: 1rem;
    }

    &:hover {
      color: @program-hover-color;
      cursor: pointer;

      .base-icon {
        color: @program-hover-color;
      }
    }
  }

  .contact-connections {
    max-width: 36rem;
  }

  .contact-options-btn-wrapper {
    .flex-container;
    .flex-container-alignment(center, space-between);
    visibility: hidden;

    .contact-options-btn {
      .flex-container;
      background: transparent;
      border: none;
      margin: 0;
      padding: 0;
      color: @program-main-color;

      .send-money-icon {
        .icon-sizing(5rem, 5rem, -3.5rem, -4.5rem);
      }

      .payments-icon {
        .icon-sizing(5rem, 5rem, -3.5rem, -4.5rem);
      }

      .delete-icon {
        .icon-sizing(5rem, 5rem, -3.5rem, -4.5rem);
      }

      &:disabled {
        color: @program-light-color;
      }

      &:hover {

        &:not(:disabled) {
          color: @program-hover-color;
        }
      }
    }
  }
}

.network-info-widget {

  .network-text-wrapper {
    display: inline-block;

    .base-icon {
      .icon-sizing(2rem, 2rem, -5rem, -6rem);
      margin-left: 1rem;
    }

    &:hover {
      color: @program-hover-color;
      cursor: pointer;
    }
  }
}

.mining-widget {
  border-top: none !important;
  height: 58rem !important;

  .mining-widget-empty {
    .flex-container;
    .flex-container-alignment(center, center);
    color: @program-empty-color;
    font-size: 3.75rem;
    height: 100%;
  }

  .mining-widget-chart {

    .chart-range-wrapper {
      .flex-container;
      .flex-container-alignment(center, space-between);
      padding: 2.5rem 7rem;

      .chart-range-group {
        .flex-container;
        .flex-container-alignment(center, center);
        color: @program-dark-color;
        font-size: 3rem;

        .chart-range-selector {
          .flex-container;
          margin: 0 2.5rem;
          padding: 0;

          li {
            border: 1px solid @mining-range-border-color;
            color: @mining-range-text-color;
            line-height: 5.5rem;
            height: 6rem;
            width: 14rem;
            text-align: center;
            list-style-type: none;

            &:first-child {
              border-radius: 3rem 0 0 3rem;
              width: 14.5rem;
            }

            &:not(:first-child) {
              border-left: none;
            }

            &:last-child {
              border-radius: 0 3rem 3rem 0;
              width: 14.5rem;
            }
          }

          .active {
            background: white;
            color: @program-dark-color;
          }
        }
      }
    }

    .chart-graph {
      height: 47rem;
      width: 100%;
    }
  }
}

//TODO active line when tooltip clicked
/*.active-widget-tr {
  background: #dce4d3 !important;
  color: #062f1b !important;

  .comment {
    .icon {
      color: #062f1b !important;
    }
  }
}*/

.red-row{
  background-color: #e95145 !important;
  color: #FFFFFF;
}