/**
 * Quick hide button styling
 */

.quick-hide-button-container {
  /* This container is needed to properly place the block in the editor,
       but the actual button will be positioned fixed on the front end */
  display: block;
  height: 50px;
  width: 100%;
}

.quick-hide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  font-size: 1rem;
  background-color: #444444;
  color: white;
  border: none;
  border-radius: 0 0 0 50px; /* Increased radius, only bottom-left corner rounded */
  cursor: pointer;
  font-weight: bold;
  position: fixed;
  top: 0; /* Position at top edge */
  right: 0; /* Position at right edge */
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  text-decoration: none;
  /* Crop the button so only left and bottom borders are visible */
  padding-left: 30px; /* More padding on the left for the rounded corner */
  padding-bottom: 20px; /* More padding on the bottom for the rounded corner */
  text-align: center;
}

.quick-hide-button:hover {
  background-color: #333333;
  transform: scale(1.05);
  text-decoration: none;
  color: white;
}

.quick-hide-button-editor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Make sure dashicons are properly aligned */
.dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 8px;
}

/* Responsive styling */
@media (max-width: 600px) {
  .quick-hide-button {
    padding: 12px 20px 15px 25px;
    font-size: 14px;
    border-radius: 0 0 0 40px; /* Slightly smaller radius on mobile */
  }
}