@import 'variables';
@import 'functions';

// VARIABLES
$cardBg: #fff;
$fontColor: #000;
$tableColor: #d4d4d9;
$tableFontColor: #898989;
$borderColor: #f1f1f1;

h3 {
  &.twofas-light-trusted-devices-header {
    margin-bottom: 0;
    max-height: 0;
    overflow: hidden;

    &.twofas-show {
      max-height: 9999px;
    }
  }
}

.twofas-light-trusted-devices {
  background: $cardBg;
  border-radius: 4px;
  max-height: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;

  &.twofas-show {
    margin-bottom: 51px;
    margin-top: 17px;
    max-height: 9999px;
    padding: 45px 0 0;
  }

  &-desc {
    text-align: center;

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

    h4 {
      color: $fontColor;
      font-size: px-to-rem(16);
      font-weight: 600;
      line-height: px-to-rem(20);
      margin-bottom: 6px;
    }

    h5 {
      color: $fontColor;
      font-size: px-to-rem(14);
      font-weight: 400;
      line-height: px-to-rem(18);
      margin-bottom: 45px;
      margin-top: 0;
    }
  }

  &-remove {
    background: none;
    border: 0;
    color: $tf-trusted-devices-remove-link-color;
    cursor: pointer;
    display: inline-block;
    font-size: px-to-rem(11);
    font-weight: 700;
    padding: 0;
    text-decoration: none;

    &:hover {
      span:not(.twofas-light-icon) {
        text-decoration: underline;
      }
    }

    &[disabled] {
      cursor: wait;
      user-select: none;
    }

    .twofas-light-icon {
      display: inline-block;
      margin-top: -2px;
      vertical-align: middle;
    }
  }

  &-table {
    padding: 0 39px 14px;

    @media all and (max-width: 600px) {
      padding: 0 20px 14px;
    }

    table {
      border-collapse: collapse;
      width: 100%;

      @media all and (max-width: 800px) {
        display: block;
      }

      thead {
        border-bottom: 1px solid $tableColor;
        border-top: 1px solid $tableColor;

        @media all and (max-width: 800px) {
          display: none;
        }

        tr {
          th {
            color: $fontColor;
            font-size: px-to-rem(16);
            font-weight: 600;
            height: 48px;
            line-height: 48px;
            padding: 0;
            text-align: left;
          }
        }
      }

      tbody {
        @media all and (max-width: 800px) {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }

        tr {
          color: $tableFontColor;

          @media all and (max-width: 800px) {
            border-bottom: 1px solid $borderColor;
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
            padding-bottom: 10px;
            width: 100%;

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

          &:last-of-type {
            td {
              padding-bottom: 0;
            }
          }

          &.twofas-light-no-devices-row {
            td {
              h5 {
                font-size: px-to-rem(16);
                font-weight: 700;
                text-align: center;
              }
            }
          }

          &.twofas-light-trusted-devices-subhead {
            @media all and (max-width: 800px) {
              display: none;
            }

            td {
              font-size: px-to-rem(16);
              font-weight: 600;
              line-height: px-to-rem(20);
              padding: 15px 0;
            }
          }

          td {
            padding-bottom: 10px;

            @media all and (max-width: 800px) {
              line-height: 1.3;
              padding-bottom: 0;

              &::before {
                font-weight: 700;
              }

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

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

              &:nth-of-type(3) {
                &::before {
                  content: 'Date and time: ';
                }
              }

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

            &:last-of-type {
              text-align: right;

              @media all and (max-width: 800px) {
                text-align: left;
              }

              span {
                display: none;

                @media all and (max-width: 800px) {
                  color: $tf-theme-color;
                  display: inline;
                }
              }

              img {
                display: inline-block;

                @media all and (max-width: 800px) {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

.twofas-light-trusted-devices-help {
  border-top: 1px solid $borderColor;
  display: block;
  padding: 22px 0;
  text-align: center;
  width: 100%;

  a {
    box-shadow: none;
    color: $tf-theme-color;
    font-size: px-to-rem(14);
    font-weight: 600;
    letter-spacing: .2px;
    line-height: px-to-rem(16);
    outline: none;

    &:hover {
      color: darken($tf-theme-color, 5%);
    }

    &:focus,
    &:active {
      box-shadow: none;
      color: $tf-theme-color;
      outline: none;
    }
  }
}