label.gcp-styles {
    grid-column: span 2;
}

label.gcp-slider {
    margin-top: -1rem;
}

#gcp-controls label.gcp-slider span {
    position: static;
    color: unset;
}

#gcp-controls label.gcp-slider input {
    z-index: 0;
}

#gcp-picker {
    box-shadow: 0 0 1.5rem 0px #00000080;
    position: fixed;
    right: 0;
    top: 30vh;
    background: white;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    z-index: 999;
}
#gcp-controls {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
}

#gcp-controls label {
    position: relative;
    min-width: 6em;
}

#gcp-controls label span {
    padding: 0.3em 0.7em;
    color: var(--color-bg);
    font-size: 0.9em;
    position:  absolute;
    top: 0;
    height: var(--inputs-height);
    width:100%;
    display: flex;
    align-items: center;
}
#gcp-controls label:nth-child(2) span { 
    color: var(--color-text);
}

label.gcp-presets {
    grid-column: span 2;
}
#gcp-controls input {
    border: none;
    padding: 0;
    position: relative;
    z-index:-1;
    height: 50px;
    border-radius: 0 !important;
}
#gcp-controls select {
    border: solid 2px lightgrey;
    border-radius: var(--border-radius-small);
    
}

button#gcp-toggle {
    width: max(120%, 10rem);
    padding: 0.7rem 20% 0.7rem 0;
    background: var(--color-primary);
    color: var(--color-bg);
    border-top-left-radius: 0.5rem;
    transition: all 0.2s, padding 0.1s linear 0s, width 0.05s;
    height: 55px;
    overflow: hidden;
}
button#gcp-toggle:hover {
    background: var(--color-secondary);
}

#gcp-picker {
    left: 100%;
    transition: all 0.4s;
    
}
#gcp-picker.expanded {
    left: calc(100% - 270px) ;
}
#gcp-toggle { 
    transition: all 0.2s;
     
}
#gcp-picker:not(.expanded) #gcp-toggle {
    margin-left: -6em;
    width: 9em;
    transition: all 0.2s linear 0s, padding 0.2s linear 0.2s, margin-left 0.3s linear 0.2s, width 0.2s linear 0.1s;
    padding-right: 3em;
    border-bottom-left-radius: 0.5rem;
}
#gcp-picker:not(.expanded) #gcp-toggle i {
    transform: rotate(180deg);
}

#gcp-toggle { 
    transition: all 0.2s;
}


.gcp-style-options {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;   
  gap: 5px;

}

.gcp-style-button {
  padding: 8px 12px;
  cursor: pointer;
  margin-bottom: 0;    
  white-space: nowrap; 
  font-size: 15px;
  border-radius: var(--border-radius-small);
}

.gcp-style-button:hover {
  background-color: #e0e0e0;  
  color: #000000;             
  transition: background-color 0.3s ease, color 0.3s ease;
}

.gcp-style-button.current {
    border: 2px solid var(--color-primary);
    background-color: var(--color-primary-grad);
    color: var(--color-text);
  }

@media only screen and (max-width: 767px) {

    #gcp-picker:not(.expanded) button#gcp-toggle span {
        display: none;
    }
    #gcp-picker:not(.expanded) #gcp-toggle {
        margin-left: -3em;
        width: 6em;
    }
}