@use "../../style/variables" as *;

.#{$prefix}-popover {
  &__title {
    margin: 0;
    padding: var(--ty-popover-title-padding);
    font-weight: var(--ty-popover-title-font-weight);
    min-width: var(--ty-popover-title-min-width);
    min-height: var(--ty-popover-title-min-height);
  }

  &__content {
    padding: var(--ty-popover-content-padding);
  }

  &_light {
    .#{$prefix}-popover {
      &__title {
        color: var(--ty-popover-title-color);
        border-bottom: 1px solid var(--ty-popover-title-border);
      }

      &__content {
        color: var(--ty-popover-content-color);
      }
    }
  }

  &_dark {
    .#{$prefix}-popover {
      &__title {
        color: var(--ty-popover-title-color-dark);
        border-bottom: 1px solid var(--ty-popover-dark-border);
      }

      &__content {
        color: var(--ty-popover-content-color-dark);
      }
    }
  }
}