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

.thumbnail-content {
  width: 166px;
  padding: 18px;

  &.invalid-content {
    :global(.btn) {
      border-color: $ron-burgundy;
    }
  }

  :global .btn {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 90px;
    justify-content: center;
    margin-left: 30px;
    padding: 0px 10px;
    width: 90px;

    :global .sg-icon {
      font-size: 20px;
      margin-bottom: 5px;
      margin-right: 0px;
    }
  }

  .thumbnail-content-action {
    width: 90px;
    height: 90px;
    margin-left: 30px;
    line-height: 2em; // make same size as "Add Email Content" version with 2 lines of copy
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: $sg-blue;

    :global(.sg-icon) {
      padding-right: 6px;
    }

    .thumbnail-content-edit {
      display: none;
    }

    &:focus,
    &:hover {
      cursor: pointer;
      border: 1px solid $sg-blue;
      background-color: $white;

      .thumbnail-content-edit {
        display: flex;
      }
    }

    :global(.blank-template),
    .thumbnail-content-thumbnail {
      z-index: -1;
      position: absolute;
      width: 90px;
      height: 90px;
      border: 1px solid $slate-20;
    }
  }
}