@import './tokens.css';

/* Hide native clear button on search inputs */
input[type='search']::-webkit-search-cancel-button {
  display: none;
}

input[type='search']::-ms-clear {
  display: none;
}

/* Styling FdsTable component */
.fds-table-wrapper--bordered {
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
}

/* Compact styling */
.fds-table-wrapper.fds-table-wrapper--compact td,
.fds-table-wrapper.fds-table-wrapper--compact th:not(.fds-table-head) {
  padding: 0.5rem;
}
.fds-table-wrapper.fds-table-wrapper--compact .fds-table-head-button {
  padding: 0.5rem;
}

/* Base styles - works in both Vue scoped and standalone CSS */
.fds-table-wrapper {
  border-radius: var(--radius-md);
  overflow-x: auto;
}

/* Table styling - vanilla CSS version (for consuming repos) */
.fds-table-wrapper table {
  min-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.fds-table-wrapper thead {
  background-color: var(--color-blue_t-100);
}

.fds-table-wrapper thead tr:first-child th:first-child {
  border-radius: var(--radius-md) 0 0 0;
}

.fds-table-wrapper thead tr:first-child th:last-child {
  border-radius: 0 var(--radius-md) 0 0;
}

.fds-table-wrapper tbody {
  background-color: var(--color-white);
}

.fds-table-wrapper tbody tr {
  border-bottom: 1px solid var(--color-blue-100);
}

.fds-table-wrapper tbody tr:last-child {
  border-bottom: none;
}

.fds-table-wrapper td {
  padding: 0.75rem 1rem;
}
.fds-table-wrapper th:not(.fds-table-head) {
  padding: 1rem;
}

.fds-table-wrapper .fds-table-head-button {
  padding: 1rem;
}

.fds-table-wrapper td,
.fds-table-wrapper th {
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

/* Remove margin from last child */
.mb-0-last-child > *:last-child {
  margin-bottom: 0 !important;
}

/* Styling links in default slot of FdsBlockAlert */
.fds-block-alert-slot .link {
  @apply text-gray-900;
}

/* Styling FdsModal component */
@media screen and (max-width: 480px) {
  .fds-modal__inner {
    width: calc(100% - 2rem);
  }
}

/* Styling FdsTabsItem component */
.fds-tabs-item--disabled {
  @apply cursor-not-allowed pointer-events-none opacity-35 select-none;
}

/* FdsDrawer slide transitions (consumers import slot-styles.css, not fds-vue-core.css) */
.fds-drawer-enter-active,
.fds-drawer-leave-active {
  transition: visibility 280ms;
}

.fds-drawer-enter-active .fds-drawer-inner {
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fds-drawer-leave-active .fds-drawer-inner {
  transition: transform 180ms cubic-bezier(0.4, 0, 1, 1);
}

.fds-drawer-enter-from .fds-drawer-inner,
.fds-drawer-leave-to .fds-drawer-inner {
  transform: translateY(100%);
}

.fds-drawer-enter-active .fds-drawer-backdrop,
.fds-drawer-leave-active .fds-drawer-backdrop {
  transition: opacity 280ms ease;
}

.fds-drawer-leave-active .fds-drawer-backdrop {
  transition-duration: 180ms;
}

.fds-drawer-enter-from .fds-drawer-backdrop,
.fds-drawer-leave-to .fds-drawer-backdrop {
  opacity: 0;
}

@media (min-width: 588px) {
  .fds-drawer-enter-from .fds-drawer-inner,
  .fds-drawer-leave-to .fds-drawer-inner {
    transform: translateX(100%);
  }
}