@import './global/mixins';
@import './global/variables.scss';

.email-card-wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;

  .label {
    display: inherit;
    margin-left: 0;

    // remove label status dot and spacing
    &::before {
      content: none;
    }
  }
}

// modifiers for .is-editable
.email-card-wrap.is-editable {
  // show for all children except the 2nd to last (.email-card-add should be last)
  &:not(:nth-last-child(2)) {
    @include email-card-connector();
  }
}

// modifiers for .is-live and .is-paused
.email-card-wrap.is-live,
.email-card-wrap.is-paused {
  // show for all children except the last (.email-card-add should be hidden for .is-live and .is-paused)
  &:not(:last-child) {
    @include email-card-connector();
  }
}

// modifiers for .is-live
.email-card-wrap.is-live {
  .email-card-send-time {
    border-top: 2px solid $sg-blue;
  }
}

// modifiers for .is-paused
.email-card-wrap.is-paused {
  .email-card-send-time {
    border-top: 2px solid $burnt-orange;
  }
}

// modifiers for .is-disable-inbox-details
.email-card-wrap.is-disable-inbox-details {
  .email-card-details a {
    color: $slate;
    pointer-events: none;
  }
}

// modifiers for .has-alert
.email-card-wrap.has-alert {
  .email-card {
    border-bottom: 0;
    border-radius: 0;
  }

  :global {
    .email-card + .alert {
      border: 1px solid $slate-20;
      border-radius: 0 0 $border-radius $border-radius;
    }

    .alert {
      width: 100%;
      border-top: 1px solid $slate-20;
    }

    .alert p {
      max-width: 100%;
      margin: 0 20px 0 60px;
    }
  }
}

.email-card-send-time {
  @include email-card-connector;
  position: relative;
  min-width: 400px;
  margin: 0 auto 30px;
  text-align: center;
}

.email-card-send-time.has-value {
  border: 1px solid $slate-20;
  border-radius: $border-radius;

  > .btn {
    width: 100%;
    padding: 20px 60px;
    font-weight: 600;
    color: $slate;
    background-color: $white;
    border: transparent;

    &:focus::after,
    &:hover::after {
      @include icon-font-base;
      position: absolute;
      top: 50%;
      right: 20px;
      margin-top: -8px;
      color: $sg-blue;
      pointer-events: none;
      content: $icon-pencil;
    }
  }
}

.email-card {
  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  padding-left: 68px; // width of .email-card-count
  border: 1px solid $slate-20;
  border-radius: $border-radius;

  // hide ellipsis and show action icons on hover
  &:focus,
  &:hover {
    :global {
      .sg-icon-ellipsis {
        opacity: 0;
      }

      .action-icons {
        opacity: 1;
      }
    }
  }

  :global .alert {
    flex-grow: 1;
    width: 100%;
    border-top: 1px solid $slate-20;
  }

  p,
  td {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 20px;
  }
}

.email-card-wrap + .email-card-add {
  display: flex;
  justify-content: center;
}

.email-card-stats {
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
  width: 100%;
  padding: 30px;
  border: 1px solid $slate-20;
  border-bottom: 0;
  border-radius: $border-radius $border-radius 0 0;

  .stat,
  .label {
    margin-bottom: 0;
    text-align: center;
  }

  .stat {
    color: $slate;
    margin-bottom: 0;
    font-size: 20px;
    line-height: 30px;
  }

  .label {
    margin-left: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    text-transform: uppercase;
  }

  .loader {
    margin: 0 auto 25px;
  }
}

.email-card-stats + .email-card {
  border-radius: 0 0 $border-radius $border-radius;
}

// absolute positioning to keep container/border 100% height
.email-card-count {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  border-right: 1px solid $slate-20;

  p {
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(270deg);
  }
}

.email-card-details {
  flex-grow: 1;
  padding: 18px 0;

  table {
    width: 100%;
  }

  td {
    padding-bottom: 2px;
  }

  .label {
    display: table-cell; // overrides inline-block set by generic .label
    width: 120px;
    font-weight: 600;

    &.required::after {
      position: relative;
      display: inline-block;
      bottom: 5px;
      left: 9px;
      width: 4px;
      height: 4px;
      background: $ron-burgundy;
      border-radius: 4px;
      content: '';
    }
  }
}

.email-row-actions {
  position: relative;
  align-self: center;
  min-width: 160px;
  padding-right: 18px;
  margin-left: auto;
  text-align: right;

  :global {
    .sg-icon {
      vertical-align: middle;
      transition: all 0.3s;
    }

    .sg-icon-ellipsis {
      font-size: 20px;
      opacity: 1;
    }

    .action-icons {
      position: absolute;
      top: 50%;
      right: 12px;
      display: inline-flex;
      margin-top: -10px;
      opacity: 0;
      transition: opacity 0.3s;

      span {
        display: inline-block;
        margin: 0 3px;
      }
    }
  }
}