@import './variables';

.docs-header {
  .DocSearch-Button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    font-weight: 500;
    transition: all var(--amplify-components-button-transition-duration);
    background-color: inherit;
    border-width: var(--amplify-components-button-border-width);
    border-style: var(--amplify-components-button-border-style);
    border-color: var(--amplify-colors-border-primary);
    border-radius: var(--amplify-components-button-border-radius);
    color: var(--amplify-colors-font-tertiary);
    font-size: var(--amplify-components-button-small-font-size);
    user-select: none;
    height: revert;
    padding: revert;
    margin: revert;
    padding-block-start: var(
      --amplify-components-button-small-padding-block-start
    );
    padding-block-end: var(--amplify-components-button-small-padding-block-end);
    padding-inline-start: var(
      --amplify-components-button-small-padding-inline-start
    );
    padding-inline-end: var(
      --amplify-components-button-small-padding-inline-end
    );

    &:hover {
      background: var(--amplify-components-button-hover-background-color);
      border-color: var(--amplify-components-button-hover-border-color);
      color: var(--amplify-components-button-hover-color);
      box-shadow: none;
    }

    :focus {
      background-color: var(--amplify-components-button-hover-background-color);
      border-color: var(--amplify-components-button-focus-border-color);
      color: var(--amplify-components-button-focus-color);
      box-shadow: var(--amplify-components-button-focus-box-shadow);
    }

    .DocSearch-Search-Icon {
      color: inherit;
      height: var(--amplify-font-sizes-medium);
      width: var(--amplify-font-sizes-medium);
    }
  }

  .DocSearch-Button-Key {
    height: var(--amplify-font-sizes-medium);
    font-family: var(--docs-font-mono);
    padding: 0;
    margin-right: var(--amplify-space-xxs);
    &:last-of-type {
      margin-right: 0;
    }
  }

  .DocSearch-Button-Placeholder {
    font-size: var(--amplify-components-button-small-font-size);
    line-height: 1;
  }
}

// Modal
.DocSearch-Container .DocSearch-Modal {
  position: fixed;

  @media (min-width: $breakpoint-small) {
    position: relative;
  }

  .DocSearch-Input {
    color: inherit;
  }

  .DocSearch-Reset:focus {
    outline: revert;
  }

  .DocSearch-Hit-source,
  .DocSearch-Logo svg {
    color: var(--amplify-colors-font-tertiary);
  }

  .DocSearch-MagnifierLabel {
    color: var(--amplify-colors-font-disabled);
  }

  .DocSearch-Hit {
    border-radius: var(--amplify-radii-small);
    padding-block-end: var(--amplify-space-small);
  }

  .DocSearch-Cancel {
    color: var(--amplify-components-button-link-color);
  }
}
