/**
 * NexusLIMS Detail Page - Buttons
 * Button styles for top group, parameters, preview, and controls
 */

/* General button styling */
button {
    cursor: pointer;
    font-size: 12px;
}

/* Override bootstrap button outline styling */
.btn:focus,.btn:active {
    outline: none !important;
    box-shadow: none;
    background-color: #ccc;
}

/* Top button group */
.btn-top-group {
    margin: 0.25em;
    font-size: 12pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.375rem 0.5rem;  /* Reduce horizontal padding at small sizes */
}

/* Download dropdown wrapper: stretch to match sibling button heights in the flex row */
#btn-download-record-group {
    display: block;
    flex: 1 1 0%;
    margin: 0;
}

#btn-download-record-group > .btn,
#btn-download-record-group > .dropdown-toggle {
    display: block;
    width: 100%;
    margin: 0.25em;
    padding: 6px 16px;
    height: auto;
    text-align: center;
}

#btn-download-record-group > .dropdown-toggle::after {
    margin-left: 0.5em;
}

#btn-download-record-group.btn-group {
    display: block;
    flex: 1 1 0%;
}



/* Gradually scale font-size from 14px down as window narrows */
@media screen and (max-width: 1280px) {
    .btn-top-group {
        font-size: 10pt;
    }
}

@media screen and (max-width: 992px) {
    .btn-top-group {
        font-size: 9.5pt;
    }
}

@media screen and (max-width: 768px) {
    .btn-top-group {
        font-size: 8.5pt;
    }
}

@media screen and (max-width: 696px) {
    .btn-top-group {
        font-size: 8pt;
    }

    /* Shorten button text at very narrow widths */
    #btn-previous-page { font-size: 0; }
    #btn-previous-page i { font-size: 8pt; }
    #btn-previous-page::after { content: "Back"; font-size: 8pt; }

    #btn-filelisting { font-size: 0; }
    #btn-filelisting i { font-size: 8pt; }
    #btn-filelisting::after { content: "Files"; font-size: 8pt; }

    #btn-download-record-group .btn { font-size: 0; }
    #btn-download-record-group .btn i { font-size: 8pt; }
    #btn-download-record-group .btn::after { content: "Download"; font-size: 8pt; }

    #btn-edit-record { font-size: 0; }
    #btn-edit-record i { font-size: 8pt; }
    #btn-edit-record::after { content: "Edit"; font-size: 8pt; }

}

/* Parameter button */
i.param-button {
    margin-left: 0.5em;
    font-size: medium;
    color: #aaa;
    border: solid 0.1em #eee;
    -webkit-transition: color 0.25s linear, border 0.25s linear, background 0.25s linear;
    -moz-transition: color 0.25s linear, border 0.25s linear, background 0.25s linear;
    -o-transition: color 0.25s linear, border 0.25s linear, background 0.25s linear;
    transition: color 0.25s linear, border 0.25s linear, background 0.25s linear;
}
i.param-button:hover:not([disabled]) {
   margin-left: 0.5em;
   font-size: medium;
   color: var(--nx-primary-color);
   border: solid 0.1em var(--nx-primary-color-dark);
   background: #eee;
}

/* Preview button */
i.preview-button {
  margin-left: 0.5em;
  font-size: medium;
  color: var(--nx-primary-color);
  border: solid 0.1em var(--nx-primary-color-dark);
  -webkit-transition: color 0.25s linear, border 0.25s linear, background 0.25s linear;
  -moz-transition: color 0.25s linear, border 0.25s linear, background 0.25s linear;
  -o-transition: color 0.25s linear, border 0.25s linear, background 0.25s linear;
  transition: color 0.25s linear, border 0.25s linear, background 0.25s linear;
}
i.preview-button:hover {
  margin-left: 0.5em;
  font-size: medium;
  color: var(--nx-primary-color);
  border: solid 0.1em var(--nx-primary-color-dark);
  background: #eee;
}