@import (reference) "./../styles/variables/neptune-tokens.less";

.tw-date-lookup-menu {
  width: 400px;
}

.tw-date-lookup-calendar {
  min-width: 300px;
  text-align: center;
  table-layout: fixed;

  > tbody > tr > td.weekend button {
    color: var(--color-content-secondary);
  }

  > tbody > tr > td {
    padding: var(--size-4);
    @media (--screen-400-zoom) {
      padding: 0;
    }

    &:has(.tw-date-lookup-day-option) {
      padding: 1px;
    }
    
    button {
      width: 100%;
      padding: var(--size-4) 0;
      @media (--screen-400-zoom) {
        padding: 0;
      }
      color: var(--color-content-accent);
      border: transparent;
      border-radius: var(--radius-small);
      background-color: transparent;
      font-weight: var(--font-weight-semi-bold);
      color: var(--color-content-primary);

      &.tw-date-lookup-day-option {
        height: var(--size-40);
        border-radius: var(--radius-full);
        line-height: var(--size-40);
        width: var(--size-40);
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
  
        &.today {
          text-decoration: underline;
          text-decoration-thickness: 2px;
          text-underline-offset: 4px;
        }
      }
    }

    &:not(.disabled, :disabled) button.show-focus,
    &:hover button:not(.disabled, :disabled) {
      background-color: var(--color-background-screen-hover);
    }

    &:not(.disabled, :disabled) button.active {
      background-color: var(--color-interactive-primary);
      color: var(--color-interactive-contrast);
    }
  }

  abbr {
    text-decoration: none;
  }

  background-color: inherit;
}

.tw-date-lookup-header-current-container {
  display: inline;
}

.np-theme-personal {
  &.tw-date-lookup-menu,
  .tw-date-lookup-menu {
    .table-bordered {
      border: none;
    }

    thead {
      background-color: unset;
    }

    td {
      border: none;
    }
  }
}