/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

moz-card {
  --card-padding: 0;
}

.theme-card {
  width: 120px;
  border: none;
  box-shadow: none;
  border-radius: var(--visual-picker-item-child-border-radius);

  &:hover {
    background-color: var(--button-background-color-hover);
  }

  @media (forced-colors) {
    &:hover {
      .theme-name {
        color: SelectedItem;
      }
    }

    :host([checked]) & {
      background-color: SelectedItem;
      color: SelectedItemText;

      .theme-name {
        color: SelectedItemText;
      }
    }
  }
}

.theme-content {
  display: flex;
  flex-direction: column;
}

.img-holder {
  width: 100%;
  height: 40px;

  border-radius: var(--visual-picker-item-child-border-radius) var(--visual-picker-item-child-border-radius) 0 0;

  /*
   * We set the background color here in case the
   * ProfilesThemeCard.theme.contentColor doesn't exist. For example, when the
   * theme card is a theme from AMO and not one of the default themes.
   */
  background-color: var(--newtab-background-color, var(--background-color-canvas));

  > img {
    -moz-context-properties: fill, stroke, fill-opacity;
    width: 100%;
    border-radius: inherit;
  }
}

.theme-name {
  display: block;
  padding: var(--space-small) var(--space-medium);

  border-block-start: var(--card-border);

  font-size: var(--font-size-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  @media (forced-colors) {
    color: ButtonText;
  }
}