/* === [ 3D BEVEL ENGINE OUTSET DAN INSET RETRO OS ] === */

/* raised 3d surface border timbul ganda */
.win-outset {
  background-color: var(--win-gray);
  border-top: 1px solid var(--win-white);
  border-left: 1px solid var(--win-white);
  border-right: 1px solid var(--win-frame);
  border-bottom: 1px solid var(--win-frame);
  box-shadow: inset 1px 1px 0px var(--win-gray-light),
              inset -1px -1px 0px var(--win-gray-dark);
}

/* sunken 3d surface border cekung ganda untuk input dan canvas */
.win-inset {
  background-color: var(--win-white);
  border-top: 1px solid var(--win-gray-dark);
  border-left: 1px solid var(--win-gray-dark);
  border-right: 1px solid var(--win-white);
  border-bottom: 1px solid var(--win-white);
  box-shadow: inset 1px 1px 0px var(--win-frame),
              inset -1px -1px 0px var(--win-gray-light);
}

/* thin single ridge divider garis tipis */
.win-inset-thin {
  border-top: 1px solid var(--win-gray-dark);
  border-left: 1px solid var(--win-gray-dark);
  border-right: 1px solid var(--win-white);
  border-bottom: 1px solid var(--win-white);
}

/* standard windows push button */
.win-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 24px;
  padding: 0 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  background-color: var(--win-gray);
  border-top: 1px solid var(--win-white);
  border-left: 1px solid var(--win-white);
  border-right: 1px solid var(--win-frame);
  border-bottom: 1px solid var(--win-frame);
  box-shadow: inset 1px 1px 0px var(--win-gray-light),
              inset -1px -1px 0px var(--win-gray-dark);
  text-decoration: none;
  color: var(--win-black);
}

.win-btn:active, .win-btn.pressed {
  border-top: 1px solid var(--win-frame);
  border-left: 1px solid var(--win-frame);
  border-right: 1px solid var(--win-white);
  border-bottom: 1px solid var(--win-white);
  box-shadow: inset 1px 1px 0px var(--win-gray-dark),
              inset -1px -1px 0px var(--win-gray-light);
  padding: 1px 11px 0 13px;
}

.win-btn.btn-primary {
  font-weight: bold;
  outline: 1px dotted var(--win-black);
  outline-offset: -4px;
}

.win-btn:focus-visible {
  outline: 1px dotted var(--win-black);
  outline-offset: -4px;
}

.win-btn.btn-sm {
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
}

.win-btn:disabled {
  color: var(--win-gray-dark);
  text-shadow: 1px 1px 0px var(--win-white);
  cursor: not-allowed;
}

/* sunken input fields dan textarea */
.win-input, .win-textarea {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--win-black);
  padding: 3px 5px;
  background-color: var(--win-white);
  border-top: 1px solid var(--win-gray-dark);
  border-left: 1px solid var(--win-gray-dark);
  border-right: 1px solid var(--win-white);
  border-bottom: 1px solid var(--win-white);
  box-shadow: inset 1px 1px 0px var(--win-frame),
              inset -1px -1px 0px var(--win-gray-light);
  user-select: text;
  -webkit-user-select: text;
}

.win-input:focus, .win-textarea:focus {
  outline: none;
}