@use "../utilities/variables";

@mixin wppd-repeatable {
  .wppd-repeatable {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: variables.$background_side;
    //border-left: 2px solid variables.$border_color;
    max-width: 500px;
    padding: 15px;
    border-radius: 10px; corner-shape: squircle;
    counter-reset: repeatable;

    > .wppd-title {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .wppd-add-repeatable {
        i {
          font-size: 1.5em;
        }
      }
    }

    > .wppd-add-repeatable {
      align-self: end;

      svg {
        height: 16px;
        width: 16px;
      }
    }

    .wppd-repeatable-wrap {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .wppd-repeatable-fields-wrap {
      display: flex;
      flex-direction: column;
      gap: 15px;
      background-color: white;
      padding: 10px;
      border-radius: 10px; corner-shape: squircle;
      position: relative;

      .wppd-repeatable-actions {
        position: absolute;
        right: 10px;
        top: 10px;
        display: flex;
        gap: 10px;
      }

      .wppd-remove-repeatable {
        display: none;

        svg {
          fill: variables.$red;
          height: 20px;
        }
      }

      :is(.wppd-move-up-repeatable,.wppd-move-down-repeatable) {
        display: none;

        svg {
          stroke: variables.$gray;
          height: 20px;
        }
      }

      &:first-child {
        .wppd-move-up-repeatable {
          display: none !important;
        }
      }

      &:last-child {
        .wppd-move-down-repeatable {
          display: none !important;
        }
      }

      &:before {
        display: block;
        counter-increment: repeatable;
        content: attr(data-repeat-title) " " counter(repeatable) ": ";
      }
    }

    .wppd-add-repeatable {
      display: flex;
      align-items: center;
      gap: 5px;
      text-decoration: none;
      line-height: 1;

      &:hover, &:focus {
        text-decoration: none !important;
      }

      &[disable="true"] {
        cursor: default;
        opacity: .6;
      }

      i {
        font-size: 1.1em;
      }

      svg {
        fill: variables.$primary;
        border-radius: 50%;
      }

      &:hover, &:focus {
        svg {
          outline: 1px solid variables.$woo_purple_10;
        }
      }
    }
  }
}