/* ===============================
   STYLES FOR THE BUTTONS
   =============================== */

/* Buttons with icons only */
#radon-btn {
  margin-left: 4px !important; /* Extra margin to separate from other buttons, only for the randon button which is injected */
}

.icon-btn {
  width: var(--btn-icon-size-2) !important;
  height: var(--btn-icon-size-2) !important;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--fg);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: var(--btn-margin);
  position: relative;
}

.icon-btn-small {
  width: var(--btn-icon-size) !important;
  height: var(--btn-icon-size) !important;
  margin-left: var(--btn-margin);
  margin-right: var(--btn-margin);
}

.icon-btn-background {
  background: var(--glass)!important;
  box-shadow: var(--box-shadow-glass);
}

.icon-btn-left{
  margin-left: 0px !important;
}

.icon-btn:hover{
  background:var(--accent-theme)!important;
  border-color: var(--border);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--hover-accent) inset;
  color:white;
}

.icon-btn.active {
  background: var(--accent-theme) !important;
  border-color: var(--border);
  box-shadow: 0 0 0 2px var(--hover-accent) inset;
  color: #fff;
}

.icon-btn-active{
  background: var(--accent-theme) !important;
  color: var(--glass);
  
}

.btn-active svg {
  stroke: var(--bg-2);
}

.icon-text-btn:hover svg {
  stroke: var(--fg);
}

.icon-btn i {
  line-height: 0;
  font-size: 24px;
}

.icon-btn img {
  width: 24px;
  height: 24px;
}

#point-coordinates:hover img,
#point-coordinates.active img,
#point-coordinates.icon-btn-active img,
#distance-measurement:hover img,
#distance-measurement.active img,
#distance-measurement.icon-btn-active img,
#angle-measurement:hover img,
#angle-measurement.active img,
#angle-measurement.icon-btn-active img,
#height-measurement:hover img,
#height-measurement.active img,
#height-measurement.icon-btn-active img,
#clip-none:hover img,
#clip-none.active img,
#clip-none.icon-btn-active img,
#clip-highlight:hover img,
#clip-highlight.active img,
#clip-highlight.icon-btn-active img,
#clip-inside:hover img,
#clip-inside.active img,
#clip-inside.icon-btn-active img,
#clip-outside:hover img,
#clip-outside.active img,
#clip-outside.icon-btn-active img {
  filter: brightness(0) saturate(100%) invert(100%);
}

.icon-btn span {
  display: none !important;
}



/* Buttons with text */
.text-btn {
  padding: 6px 14px;                   
  display: inline-flex;                 
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: var(--glass) !important;
  color: #e5e7eb;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .08s ease,
              background-color .12s ease,
              border-color .12s ease,
              box-shadow .12s ease;
}


.text-btn.inline {
  width: auto;
  padding: 6px 12px;
  font-family: var(--font-familiy-1)!important; 
  font-size: var(--font-size-sm)!important;
  font-weight: var(--font-weight-regular)!important;
  color: var(--fg);
}


.text-btn:hover {
  background: var(--accent-theme) !important;
  color: var(--glass) !important;
}


.text-btn.active {
  background: var(--hover-accent);
  border-color: var(--border);
  color: var(--fg);
  box-shadow: 0 6px 18px var(--hover-accent);
  transform: none;
}


.text-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- The Button --- */
.icon-text-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  color: var(--btn-color-dark);
  cursor: pointer;
  padding: var(--btn-padding);
  border-radius: var(--radius-sm);
  position: relative;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin: 0 0.25rem; 
}        

.icon-text-btn:hover {
  background-color: var(--accent-theme-hover);
  color: var(--fg);
}

.icon-text-btn svg {
  flex-shrink: 0;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  transition: transform 0.2s ease;
}

.icon-text-btn img {
  flex-shrink: 0;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  transition: transform 0.2s ease;
}

        
.icon-text-text {
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-width 0.3s ease, margin-left 0.3s ease;         
  margin-left: 0;
}

        
.icon-text-btn:hover .icon-text-text {
  opacity: 1;
  max-width: 150px;
  margin-left: 0.75rem;
}


.icon-text-btn:hover svg {
  transform: scale(1.1);
}

.icon-text-btn:hover img {
  transform: scale(1.1);
}

.icon-text-btn.icon-text-btn-active {
  background: var(--accent-theme) !important;
  color: var(--glass);
}

.icon-text-btn.icon-text-btn-active .icon-text-text {
  opacity: 1;
  max-width: 150px;
  margin-left: 0.75rem;
}

.sep-btn {
  width: 1px;
  height: var(--btn-icon-size);
  background-color: var(--btn-sep-color-dark);
  margin: 0 0.5rem;
}