@use '/src/components/config' as *;

.custom-sync-section {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;

  .sync-direction-items {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
    position: relative;
    flex-direction: column;
    padding: 1rem;
    border-radius: $border-radius-small;
    border: $border-light-medium;

    input[type="checkbox"]{
      position: absolute;
      width: 100% !important; // To overwrite dynamic.scss input width
      height: 100%;
      top: 0;
      left: 0;
      outline: none;
      border: none !important; // To overwrite common.css
      box-shadow: none;

      &::before{
        top: 0.63rem;
        position: absolute;
        right: 0.315rem;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: $border-radius-small;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
        background: transparent;
      }
    }
    
    &:has(input:checked){
      box-shadow: 0 0 0.0rem 0.126rem $color-active;
      background: linear-gradient(45deg, #0000001c, transparent);
    }

  .sync-meta-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: auto;

      img {
        width: 1.89rem;
      }

      i {
        font-size: 1rem;
      }
    }
  }

  .admin-pro-tag{
    position:relative;
  }
}