:root {
    --fixed-field-width-m: 80px; /* マイナスfloat値が収まる幅 */
    --fixed-field-width-s: 48px;
    --field-height: 20px;
    --slider-min-width: 180px;
    --input-border-width: 1px;
    --cursor-resize-horizontal: resource("cursor_ew") 24 9;
    --cursor-resize-vertical: resource("cursor_ns") 9 22;
    --cursor-resize-up-left: resource("cursor_nwse") 16 16;
    --cursor-resize-up-right: resource("cursor_nesw") 16 16;
    
    --rosettaui-gray-button-tint: #A0A0A0;

    --rosettaui-dark-gray: #101010;
    --rosettaui-highlight-gray: #606060;
    --rosettaui-highlight-light-gray: #BBBBBB;
    --rosettaui-highlight-dark-gray: #303030;
    --rosettaui-highlight-blue: rgb(0, 150, 230);
    --rosettaui-highlight-dark-blue: var(--unity-colors-highlight-background);

    --rosettaui-slider-tracker-height: 2px;
    --rosettaui-slider-tracker-margin-top: -1px; /* half of height */
    --rosettaui-slider-tracker-border-radius: 2px;
    
    --rosettaui-slider-dragger-height: 10px;
    --rosettaui-slider-dragger-margin-top: -5px; /* half of height */
    --rosettaui-slider-dragger-border-radius: 5px;
    
    --rosettaui-scroller-size: 12px;
    --rosettaui-scroller-tint-color: #707070;
    --rosettaui-scroller-highlith-tint-color: #808080;
    
    --rosettaui-color-input-background: #181818;
    --rosettaui-color-window-background: rgba(45, 45, 45, 0.85);
    --rosettaui-color-window-background-focused: rgba(45, 45, 45, 0.9);
    --rosettaui-color-box-background: rgba(100,100,100,0.3);
    --rosettaui-color-list-background: var(--rosettaui-color-box-background);
    --rosettaui-color-tabs-title-inactive-background: rgba(0,0,0,0.4);
    --rosettaui-color-animation-curve-background: #565656;

    --rosettaui-button-background-pressed: var(--rosettaui-highlight-dark-blue);
    
    font-size: 12px;
    color: var(--unity-colors-default-text);
}


/********************************************************************************
* boxshadow
********************************************************************************/
.rosettaui-box-shadow {
    position: absolute;
    background-image: url("../Images/box-shadow.png");
    -unity-background-image-tint-color: rgba(0,4,16,0.4);

    border-width: 22px 25px 24px 21px;

    -unity-slice-top: 22;
    -unity-slice-right: 25;
    -unity-slice-bottom: 24;
    -unity-slice-left: 21;
}

.rosettaui-window--focused > .rosettaui-box-shadow {
    -unity-background-image-tint-color: rgba(0,4,16,0.8);
}

/********************************************************************************
* Event Blocker
********************************************************************************/
.rosettaui-event-blocker {
    position: absolute;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

/********************************************************************************
* Group
********************************************************************************/
.rosettaui-column {
    flex: 1 0 auto;
}

.rosettaui-row {
    flex-direction: row;
}

.rosettaui-row > * {
    flex-grow: 1;
}

.rosettaui-row > .unity-label,
.rosettaui-row > .unity-button
{
    flex-grow: 0;
}

.rosettaui-wrap-element
{
    flex-shrink: 0;
}


/********************************************************************************
* Composite Field
********************************************************************************/
.rosettaui-composite-field
{
    flex-direction: row;
    margin-right: 0;
}

.rosettaui-composite-field__content-container 
{
    flex-direction: row;
}

/*
 Unity2022で.unity-base-field__inputの右端が途切れて表示されてしまう問題の対策
 Unity6ではこの問題は起きていない
 */
.rosettaui-composite-field .unity-base-field
{
    padding-right: 2px;
}

.rosettaui-composite-field .unity-base-field__label 
{
    min-width: 10px;
}

.rosettaui-composite-field .unity-base-field__input 
{
    min-width: var(--fixed-field-width-m);
}

/********************************************************************************
* PreviewBaseField
* Color, Gradient, AnimationCurve Field のベースクラス
********************************************************************************/
.rosettaui-preview-base-field__input:hover {
    border-color: var(--unity-colors-input_field-border-hover);
}

.rosettaui-preview-base-field:focus > .rosettaui-preview-base-field__input {
    border-color: var(--unity-colors-input_field-border-focus);
}

.rosettaui-preview-base-field__input,
.rosettaui-preview-base-field__input:disabled
{
    padding: 0;
    border-color: var(--unity-colors-input_field-border);
    width: 124px;
}


/********************************************************************************
* ColorField
********************************************************************************/
.rosettaui-color-field__input-rgb {
    flex-grow: 1;
    width: 100%;
    background-color: black;
}

.rosettaui-color-field__input-alpha-container {
    height: 20%;
    width: 100%;
    background-color: black;
}

.rosettaui-color-field__input-alpha {
    flex-grow: 0;
    flex-shrink: 0;
    position: absolute;
    width: 0;
    height: 100%;
    background-color: white;
}

.rosettaui-color-field__overlap-text {
    position: absolute;
    width: 100%;
    height: 100%;
}

.rosettaui-color-field__overlap-text--light {
    color:#F0F0F0;
}

.rosettaui-color-field__overlap-text--dark {
    color: #101010;
}


/********************************************************************************
* AnimationCurveField
********************************************************************************/
.rosettaui-animation-curve-field__input {
    background-color: var(--rosettaui-color-animation-curve-background);
}


/********************************************************************************
* SliderInField
********************************************************************************/
.rosettaui-slider-in-field > .unity-base-slider--horizontal
{
    flex-grow: 1;
    min-height: 18px;
}

.rosettaui-slider-in-field > .unity-base-text-field__input
{
    width: var(--fixed-field-width-m);
    min-width: var(--fixed-field-width-m);
    flex-grow: 0;
}


/********************************************************************************
* Window Launcher
********************************************************************************/
.rosettaui-window-launcher {
    border-width: 1px;
    border-color: transparent;
}

.rosettaui-window-launcher:hover {
    background-color: var(--rosettaui-highlight-dark-gray);
}

.rosettaui-window-launcher:checked {
    background-color: var(--rosettaui-highlight-dark-blue);
}

.rosettaui-window-launcher:focus {
    color: var(--unity-colors-label-text-focus);
}


.rosettaui-window-launcher .unity-toggle__input {
    background-color: transparent;
    border-width: 0;
}

.rosettaui-window-launcher__checkmark {
    align-self: center;
    width: 16px;
    height: 16px;
    border-width: 1px;
    -unity-background-image-tint-color: darkgray;
    background-image: url("../Images/MaterialSymbols/open-in-new.png");
    background-color: transparent;
    border-color: transparent;
}

.rosettaui-window-launcher:focus .rosettaui-window-launcher__checkmark {
    -unity-background-image-tint-color: var(--unity-colors-label-text-focus);
}

/********************************************************************************
* Space
********************************************************************************/
.rosettaui-space
{
    flex-grow: 100;
    flex-shrink: 0;
}

/********************************************************************************
* Checkerboard
********************************************************************************/
.rosettaui-checkerboard
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-width: 0;
    background-position: 0 0;
    background-repeat: repeat;
}

/********************************************************************************
* MoreVertMenuButton
********************************************************************************/
.rosettaui-morevert-menu-button
{
    width: 20px;
    height: 20px;
    margin: 0 2px 0 auto; /* right aligned */
    padding: 2px;
    border-width: 0;
    border-radius: 1px;
    align-self: center;
    background-color: transparent;
    background-image: url("../Images/MaterialSymbols/more_vert.png");
    -unity-background-image-tint-color: var(--unity-colors-default-text);
}

.rosettaui-morevert-menu-button:active:enabled,
.rosettaui-morevert-menu-button:focus:enabled
{
    background-color: transparent;
}

/********************************************************************************
* FoldOutCustom
********************************************************************************/
.rosettaui-foldout-custom__header-content
{
    flex-grow: 1;
}

/********************************************************************************
* ToggleButton
********************************************************************************/
.rosettaui-toggle-button__toggled,
.rosettaui-toggle-button__toggled:focus,
.rosettaui-toggle-button__toggled:hover,
.rosettaui-toggle-button__toggled:enabled:focus,
.rosettaui-toggle-button__toggled:enabled:hover
{
    background-color: var(--rosettaui-highlight-dark-blue);
}