@opensig/opendesign/es/_components/in-box/style/index.css

.o_box {
  --_box-color: var(--o-color-info2);
  --_box-color-disabled: var(--o-color-info4);
  --icon-color: var(--o-color-info2);
  --icon-color-hover: var(--o-color-info2);
  --icon-color-disabled: var(--o-color-info4);
  --_box-ap-bd: 1px solid var(--_box-ap-bd-color);
  --_box-ap-bd-disabled: 1px solid var(--_box-ap-bd-color-disabled);
  --_box-bd: 1px solid var(--_box-bd-color);
  --_box-bg-color: var(--o-color-fill2);
  --_box-bg-color-hover: var(--o-color-fill2);
  --_box-bg-color-focus: var(--o-color-fill2);
  --_box-bg-color-disabled: var(--o-color-fill2);
  --_box-prepend-append-bd: 1px solid var(--o-color-control1);
  --_box-prepend-append-bd-color-disabled: var(--o-color-control4-light);
  --_box-prepend-append-bg-color: var(--o-color-control5-light);
}

.o_box-solid {
  --_box-prepend-append-bd: 1px solid var(--o-color-control2-light);
  --_box-prepend-append-bg-color: var(--o-color-control1-light);
}

.o_box-text {
  --_box-bd-color: transparent;
  --_box-bg-color: transparent;
  --_box-bd-color-focus: var(--o-color-control5-light);
  --_box-bd-color-disabled: transparent;
  --_box-bg-color-disabled: transparent;
}
.o_box-text.o_box-normal {
  --_box-bd-color-hover: var(--o-color-control5-light);
  --_box-bg-color-hover: var(--o-color-control5-light);
}
.o_box-text.o_box-success {
  --_box-bd-color-hover: var(--o-color-control5-light);
  --_box-bg-color-hover: var(--o-color-control5-light);
}
.o_box-text.o_box-warning {
  --_box-bd-color-hover: var(--o-color-control5-light);
  --_box-bg-color-hover: var(--o-color-control5-light);
}
.o_box-text.o_box-danger {
  --_box-bd-color-hover: var(--o-color-control5-light);
  --_box-bg-color-hover: var(--o-color-control5-light);
}

.o_box-outline.o_box-normal {
  --_box-bd-color: var(--o-color-control1);
  --_box-bd-color-hover: var(--o-color-control2);
  --_box-bd-color-focus: var(--o-color-primary3);
  --_box-bd-color-disabled: var(--o-color-control4);
}
.o_box-outline.o_box-success {
  --_box-bd-color: var(--o-color-success1);
  --_box-bd-color-hover: var(--o-color-success2);
  --_box-bd-color-focus: var(--o-color-success3);
  --_box-bd-color-disabled: var(--o-color-success4);
}
.o_box-outline.o_box-warning {
  --_box-bd-color: var(--o-color-warning1);
  --_box-bd-color-hover: var(--o-color-warning2);
  --_box-bd-color-focus: var(--o-color-warning3);
  --_box-bd-color-disabled: var(--o-color-warning4);
}
.o_box-outline.o_box-danger {
  --_box-bd-color: var(--o-color-danger1);
  --_box-bd-color-hover: var(--o-color-danger2);
  --_box-bd-color-focus: var(--o-color-danger3);
  --_box-bd-color-disabled: var(--o-color-danger4);
}

.o_box-outline {
  --_box-ap-bd-color: var(--o-color-control1);
  --_box-ap-bd-color-disabled: var(--o-color-control4);
}

.o_box-solid.o_box-normal {
  --_box-bd-color: var(--o-color-control1-light);
  --_box-bd-color-hover: var(--o-color-control2-light);
  --_box-bd-color-focus: var(--o-color-primary3-light);
  --_box-bd-color-disabled: var(--o-color-control4-light);
  --_box-bg-color: var(--o-color-control1-light);
  --_box-bg-color-hover: var(--o-color-control2-light);
  --_box-bg-color-disabled: var(--o-color-control4-light);
}
.o_box-solid.o_box-success {
  --_box-bd-color: var(--o-color-success1-light);
  --_box-bd-color-hover: var(--o-color-success2-light);
  --_box-bd-color-focus: var(--o-color-success3-light);
  --_box-bd-color-disabled: var(--o-color-success4-light);
  --_box-bg-color: var(--o-color-success1-light);
  --_box-bg-color-hover: var(--o-color-success2-light);
  --_box-bg-color-disabled: var(--o-color-success4-light);
}
.o_box-solid.o_box-warning {
  --_box-bd-color: var(--o-color-warning1-light);
  --_box-bd-color-hover: var(--o-color-warning2-light);
  --_box-bd-color-focus: var(--o-color-warning3-light);
  --_box-bd-color-disabled: var(--o-color-warning4-light);
  --_box-bg-color: var(--o-color-warning1-light);
  --_box-bg-color-hover: var(--o-color-warning2-light);
  --_box-bg-color-disabled: var(--o-color-warning4-light);
}
.o_box-solid.o_box-danger {
  --_box-bd-color: var(--o-color-danger1-light);
  --_box-bd-color-hover: var(--o-color-danger2-light);
  --_box-bd-color-focus: var(--o-color-danger3-light);
  --_box-bd-color-disabled: var(--o-color-danger4-light);
  --_box-bg-color: var(--o-color-danger1-light);
  --_box-bg-color-hover: var(--o-color-danger2-light);
  --_box-bg-color-disabled: var(--o-color-danger4-light);
}

.o_box-small {
  --_box-text-size: var(--o-font_size-tip1);
  --_box-text-height: var(--o-line_height-tip1);
  --_box-radius: var(--o-radius_control-xs);
  --icon-size: var(--o-icon_size_control-xs);
}

.o_box-medium {
  --_box-text-size: var(--o-font_size-tip1);
  --_box-text-height: var(--o-line_height-tip1);
  --_box-radius: var(--o-radius_control-s);
  --icon-size: var(--o-icon_size_control-xs);
}

.o_box-large {
  --_box-text-size: var(--o-font_size-text1);
  --_box-text-height: var(--o-line_height-text1);
  --_box-radius: var(--o-radius_control-l);
  --icon-size: var(--o-icon_size_control-s);
}

.o_box-round-pill {
  --_box-radius: var(--o-control_size-l);
}

.o_box {
  color: var(--_box-color);
  display: flex;
  height: var(--_box-height);
  font-size: var(--_box-text-size);
  line-height: var(--_box-text-height);
}

.o_box-main {
  display: flex;
  padding: var(--_box-padding);
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: var(--_box-radius);
  border: var(--_box-bd);
  background-color: var(--_box-bg-color);
  transition: all var(--o-duration-s) var(--o-easing-standard);
}
@media (hover: hover) {
  .o_box-main:hover {
    border-color: var(--_box-bd-color-hover);
    background-color: var(--_box-bg-color-hover);
  }
}
.o_box-main.o_box-focused {
  border-color: var(--_box-bd-color-focus);
  background-color: var(--_box-bg-color-focus);
}
.o_box-main.o_box-disabled, .o_box-main.o_box-readonly {
  color: var(--_box-color-disabled);
  border-color: var(--_box-bd-color-disabled);
  background-color: var(--_box-bg-color-disabled);
}
.o_box-main.o_box-disabled {
  cursor: not-allowed;
}
.o_box-main.o_box-readonly {
  cursor: default;
}
.o_box-main.has-prepend {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.o_box-main.has-append {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.o_box-append,
.o_box-prepend {
  display: flex;
  align-items: center;
  border: var(--_box-prepend-append-bd);
  background-color: var(--_box-prepend-append-bg-color);
  overflow: hidden;
}
.o_box-readonly .o_box-append, .o_box-disabled .o_box-append,
.o_box-readonly .o_box-prepend,
.o_box-disabled .o_box-prepend {
  border-color: var(--_box-prepend-append-bd-color-disabled);
}

.o_box-append {
  flex-shrink: 0;
  border-top-right-radius: var(--_box-radius);
  border-bottom-right-radius: var(--_box-radius);
}

.o_box-prepend {
  flex-shrink: 0;
  padding: var(--_box-prepend-padding);
  border-top-left-radius: var(--_box-radius);
  border-bottom-left-radius: var(--_box-radius);
}

.o_box-solid .o_box-prepend {
  border-left-width: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}
.o_box-solid .o_box-append {
  border-right-width: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}

.o_box-outline .o_box-prepend {
  border-right-width: 0;
}
.o_box-outline .o_box-append {
  border-left-width: 0;
}

.o_box-text .o_box-main {
  border-right-width: 0;
  border-top-width: 0;
  border-left-width: 0;
}