.breakpoint-block {
  position: relative;
  border: 1px dashed rgba(0, 0, 0, 0.4);
  padding: 0;
  margin-bottom: 20px;

  /* Styles de base pour les différents modes */
  &[class*="breakpoint-desktop-"] {
    .breakpoint-info {
      background-color: #2271b1;
    }
  }

  &[class*="breakpoint-mobile-"] {
    .breakpoint-info {
      background-color: #d63638;
    }
  }

  &[class*="breakpoint-tablet-"] {
    .breakpoint-info {
      background-color: #00a32a;
    }
  }

  .breakpoint-info {
    position: absolute;
    top: -20px;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 2px 8px;
    color: white;
    border-radius: 2px 0 2px 0;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

    svg {
      width: 12px;
      height: 12px;
      fill: currentColor;
      margin-right: 6px;
    }

    .breakpoint-message {
      display: flex;
      align-items: center;
      
      span {
        margin-left: 5px;
        opacity: 0.9;
        font-size: 11px;
      }
    }
  }
  
} 