.gradient__example{width:100%;height:100%;background-image:linear-gradient(20deg,#ccff00,green);border-radius:10px}.gradient__tabs{margin-bottom:10px}.gradient__degrees{width:calc(var(--spacing)*16);padding-inline:calc(var(--spacing)*1);padding-block:calc(var(--spacing)*.5);text-align:right;font-size:var(--heroui-font-size-small);line-height:var(--heroui-line-height-small);color:hsl(var(--heroui-default-700)/1);font-weight:var(--font-weight-medium);background-color:hsl(var(--heroui-default-100)/1);border-radius:var(--heroui-radius-small);border-width:var(--heroui-border-width-medium);border-style:var(--tw-border-style);border-color:rgba(0,0,0,0);outline-style:solid;outline-color:rgba(0,0,0,0);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.gradient__degrees:focus,.gradient__degrees:hover{border-color:hsl(var(--heroui-primary)/1)}.gradient__range{border-radius:var(--radius-md);font-size:var(--heroui-font-size-tiny);line-height:var(--heroui-line-height-tiny);color:hsl(var(--heroui-default-500)/1)}.gradient__colorBlocks{display:flex;flex-direction:column;justify-content:start;align-items:center;margin-top:10px;height:220px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.gradient__colorBlocks::-webkit-scrollbar{display:none;width:0;height:0}.gradient__positionSlider{margin:0 5px;max-width:160px}.gradient__colorBlock{height:40px;width:380px;display:flex;align-items:center;border-bottom:1px solid hsl(var(--heroui-default-100)/1)}.gradient__colorBlock:last-child{border-bottom:none}.gradient__colorCode{width:calc(var(--spacing)*19);padding-inline:calc(var(--spacing)*1);padding-block:calc(var(--spacing)*.5);text-align:right;font-size:var(--heroui-font-size-small);line-height:var(--heroui-line-height-small);color:hsl(var(--heroui-default-700)/1);font-weight:var(--font-weight-medium);background-color:hsl(var(--heroui-default-100)/1);border-radius:var(--heroui-radius-small);border-width:var(--heroui-border-width-medium);border-style:var(--tw-border-style);border-color:rgba(0,0,0,0);outline-style:solid;outline-color:rgba(0,0,0,0);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));margin-left:7px;text-align:center}.gradient__colorCode:focus,.gradient__colorCode:hover{border-color:hsl(var(--heroui-primary)/1)}.gradient__color{width:36px;height:38px}.gradient__addColorBox{height:28px}.gradient__crossButton{margin-left:5px}.gradient__addColorButton,.gradient__crossButton{border-radius:var(--heroui-radius-small);width:28px;height:28px;font-size:18px;background-color:hsl(var(--heroui-default-100)/1);color:hsl(var(--heroui-default-700)/1)}.gradient__addColorButton{margin-top:5px}.gradient__copyButton{position:absolute;left:10px;bottom:10px}.gradient__randomizeButton{position:absolute;right:10px;bottom:10px;background-color:hsl(var(--heroui-default-100)/1);color:hsl(var(--heroui-default-700)/1)}