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

.template-wrap {
  .thumb {
    position: relative;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid $slate-20;
    height: 240px;

    :global(.blank-template) {
      margin-top: 40px;
    }

    &:hover,
    &:focus-within {
      border-color: $sg-blue;

      img,
      svg {
        opacity: 0.1;
      }

      .btn-list,
      .overlay-text {
        opacity: 1;
      }
    }

    img,
    .btn-list,
    .overlay-text {
      transition: opacity 0.3s;
    }

    img {
      display: block;
      max-width: 100%;
    }

    .btn-list {
      height: 200px;
      position: absolute;
      top: $scale-base-down-01;
      width: 100%;
      padding: 0 $scale-base-up-09;
      opacity: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;

      :global(.btn) {
        margin-top: $scale-base-up-02;
      }
    }
  }

  .editor-type {
    margin-top: $scale-base-down-01;
    font-size: $scale-base-up-01;
    line-height: 20px;
    opacity: 0;
    transition: opacity 0.3s;

    :global(.sg-icon) {
      margin-right: 0;
    }
  }

  &:hover {
    .editor-type {
      opacity: 1;
    }
  }
}

.overlay-text {
  opacity: 0;
  position: absolute;
  width: 100%;
  right: 0;
  top: calc(100% - 40px);
  font-size: $scale-base-up-01;
  color: $slate-80;
}

.template-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;

  :global(p.is-size-h4) {
    margin: 0;
  }

  :global(.btn-list .btn-dropdown) {
    &:before {
      content: '';
    }

    padding: 4px;
    background-color: $white;
    border-color: $slate-10;
    box-shadow: none;

    :global(.sg-icon.sg-icon-ellipsis-vertical) {
      font-size: $scale-base-up-04;
      font-weight: bold;
      color: $slate-40;
      margin: 0;
    }

    :global(.dropdown-menu) {
      margin-top: $scale-base-down-01;
    }
  }
}