.spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: Inter, Helvetica, 'sans-serif';
    background-color: #fff;
  }
  
  .spinner-wrapper {
    display: flex;
    align-items: center;
    margin-top: 1.25rem;
  }
  
  .spinner-wrapper .spinner-text {
    color: #99A1B7;
    margin-left: 1.25rem;
    font-size: 1rem;
    font-weight: 400;
  }

  /* RTL support: add margin-right instead of margin-left */
  [dir="rtl"] .spinner-wrapper .spinner-text {
    margin-left: 0;
    margin-right: 1.25rem;
  }
  
  .spinner {
    width: 2rem;
    height: 2rem;
    border: 0.185rem solid #1B84FF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 0.65s linear infinite;
  }
  
  @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
  }

.spinner-wrapper.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
  }


  /* channel preview classes */
  /* --- ChannelThemePreview Top Bar Styles --- */
.channel-preview-browser-bar {
  background: #f5f5f7;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  min-height: 40px;
  gap: 8px;
  border-bottom: none;
  /* The border color will be set inline for dynamic color */
}

.channel-preview-browser-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
}
.channel-preview-browser-dot.red { background: #ff5f56; }
.channel-preview-browser-dot.yellow { background: #ffbd2e; }
.channel-preview-browser-dot.green { background: #27c93f; }

.channel-preview-favicon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.channel-preview-favicon-title {
  font-weight: 500;
  color: #333;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}


/* color picker */
.color-picker-swatch {
  width: 20px;
  height: 20px;
  background-color: var(--color-picker-value, #fff);
  border: 1px solid #c4cada;
  border-radius: 4px;
}

.color-picker-popover {
  position: absolute;
  z-index: 10;
  margin-top: 8px;
  min-width: 260px;
}

.color-picker-buttons {
  display: flex;
  width: 220px;
}

.color-picker-button {
  flex: 1;
  min-width: 0;
  border: 1px solid grey;
  background: #fff;
  cursor: pointer;
  padding: 4px 0;
}

.color-picker-error {
  color: red;
  font-size: 12px;
}