@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'mixins/button' as *;

@include b(popover) {
  @include set-component-css-var('popover', $popover);

  &.#{$namespace}-popper {
    background: getCssVar('popover-bg-color');
    min-width: 150px;
    border-radius: getCssVar('popover-border-radius');
    border: 1px solid getCssVar('popover-border-color');
    padding: getCssVar('popover-padding');
    z-index: getCssVar('index-popper');
    color: getCssVar('popover-text-color');
    line-height: 20px;
    font-size: getCssVar('popover-font-size');
    box-shadow: getCssVar('box-shadow-light');
    overflow-wrap: break-word;
    box-sizing: border-box;
    width: auto !important;
    max-width: 450px;

    @include m(plain) {
      padding: getCssVar('popover-padding-large');
    }

    @include e(title) {
      color: getCssVar('popover-title-text-color');
      font-size: getCssVar('popover-title-font-size');
      line-height: 1;
      margin-bottom: 12px;
    }

    @include e(reference) {
      &:focus:not(.focusing),
      &:focus:hover {
        outline-width: 0;
      }
    }

    @include when(dark) {
      @include set-css-var-value(('popover', 'bg-color'), var(#{getCssVarName('text-color', 'primary')}));
      @include set-css-var-value(('popover', 'border-color'), var(#{getCssVarName('text-color', 'primary')}));
      @include set-css-var-value(('popover', 'title-text-color'), var(#{getCssVarName('bg-color')}));
      color: getCssVar('bg-color');
    }

    &:focus:active,
    &:focus {
      outline-width: 0;
    }
  }
}

.popover-footer {
  display: flex;
  padding-top: 16px;
  gap: 28px;

  .el-button {
    flex-basis: 100%;

    @apply el-button--mini;

    &:first-of-type {
      @include button-variant('secondary');
      // @include button-plain('secondary'); // for plain button bunu deneyebilirsin eğer outline olsun isteniyorsa. denemedim ama çalışır sanırım.
    }

    /*
        &:first-of-type {
      --el-button-hover-text-color: var(--el-color-primary-light-4);
      --el-button-hover-bg-color: var(--el-color-white);
      --el-button-hover-border-color: var(--el-color-primary-light-4);
      --el-button-active-text-color: var(--el-color-primary-light-6);
      --el-button-active-bg-color: var(--el-color-white);
      --el-button-active-border-color: var(--el-color-primary-light-6);
      --el-button-bg-color: var(--el-color-white);
      --el-button-text-color: var(--el-color-primary);
    }
    */
  }
}