@import '../../includes/variables';
@import '../../twofas/sprites';

.twofas-content-table {
  height: auto;
  overflow: hidden;
  width: 100%;

  table {
    border-collapse: collapse;
    margin-top: 95px;
    margin-bottom: 10px;
    width: 100%;

    @media all and (max-width: $screen-md-max) {
      margin-top: 50px;
    }

    thead {
      background: $TF_Trusted_Table_Color;
      text-align: left;

      @media all and (max-width: $screen-sm-max) {
        display: none;
      }

      th {
        font-size: 13px;
        font-weight: 300;
      }
    }

    td,
    th {
      height: 38px;
      line-height: 38px;

      @media all and (max-width: $screen-sm-max) {
        height: auto;
        overflow: hidden;
        line-height: 22px;
      }
    }

    th {
      padding: 0 25px;

      @media all and (max-width: 1100px) {
        padding: 0 10px;
      }
    }

    tr {
      @media all and (max-width: $screen-sm-max) {
        float: left;
        width: 49%;
        padding: 15px 0;
        margin-right: 2%;

        &:nth-of-type(2n) {
          margin-right: 0;
        }
      }

      @media all and (max-width: $screen-xs-max) {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;

        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }

    td {
      font-size: 15px;

      @media all and (max-width: $screen-sm-max) {
        padding: 0 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &::before {
          font-weight: 700;
          font-size: 13px;
          margin-right: 5px;
        }

        &:nth-of-type(1) {
          &::before {
            content: 'Browser and device: ';
          }
        }

        &:nth-of-type(2) {
          &::before {
            content: 'Added: ';
          }
        }

        &:nth-of-type(3) {
          &::before {
            content: 'Last logged in: ';
          }
        }

        &:nth-of-type(4) {
          &::before {
            content: 'IP Address: ';
          }
        }

        &:nth-of-type(5) {
          &::before {
            content: 'Action: ';
          }
        }
      }

      &:first-of-type {
        .td-content {
          border-left: none;
        }
      }

      .td-content {
        border-left: 1px solid $TF_Trusted_Table_Color;
        display: inline;
        height: 18px;
        padding: 0 25px;

        @media all and (max-width: 1100px) {
          padding: 0 10px;
        }

        @media all and (max-width: $screen-sm-max) {
          border-left: 0;
          padding: 0;
          font-size: 13px;
        }
      }

      .hour {
        color: $TF_Trusted_Hour_Color;
        margin-left: 15px;
        font-size: 13px;
        display: none;

        @media all and (max-width: $screen-sm-max) {
          margin-left: 5px;
        }
      }

      .trusted-device-country {
        color: $TF_Trusted_Hour_Color;
        font-size: 13px;
        display: none;
        margin-right: 4px;

        &:empty {
          margin-right: 0;
        }
      }

      .ip {
        margin-left: -4px;
      }

      .visible {
        display: inline-block;
      }

      .remove {
        color: $TF_Trusted_Remove_Color;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;

        &:hover {
          color: $TF_Trusted_Remove_Hover_Color;
          text-decoration: none;

          .icon {
            @include icon-remove-hover();
          }
        }

        .icon {
          vertical-align: middle;
          margin-top: -2px;
        }
      }
    }

    tr {
      border: 1px solid $TF_Trusted_Table_Color;
    }
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    @media all and (max-width: $screen-sm-max) {
      display: block;
    }
  }

  h5 {
    font-size: 22px;
    line-height: 60px;
    font-weight: 700;
    margin: 20px 0;
    text-align: center;
  }

  .trusted-devices {
    @media all and (max-width: $screen-sm-max) {
      height: auto;
      overflow: hidden;
    }
  }

  .add-trusted-device {
    width: 100%;
    float: none;
    height: auto;
    overflow: hidden;
    clear: both;
    margin-top: 20px;
  }
}