@use "../../../index" as *;

$header-color-divider: var(--color-divider);
$header-container-height: 64px;
$header-container-gap-width: 30px; // 140px;
$header-container-bottom: 20px;
$header-container-padding-interval: 16px;
$header-container-title-font-family: 'Roboto';
$header-container-title-font-size: 20px;
$header-container-title-line-height: 24px;
$header-container-title-width: 180px;
$header-container-buttons-gap-width: 29px;
$header-container-svg-icon-width: 24px;
$header-container-svg-icon-height: 24px;
$header-container-color-icon: var(--color-icon);

.header-dialogs-container{
  display: flex;
  height: $header-container-height;
  gap: 0 $header-container-gap-width;
  padding: $header-container-padding-interval $header-container-padding-interval $header-container-padding-interval $header-container-bottom;
  justify-content: space-between;
  &--title_wrapper{
   font-family: $header-container-title-font-family;
   font-style: normal;
   font-weight: 500;
   font-size: $header-container-title-font-size;
   line-height: $header-container-title-line-height;
   letter-spacing: 0.0015em;

    width: 100%;
   text-align: left;

   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}
  &__title{
  }
  &__buttons{
    display: flex;
    align-items: center;
    gap: $header-container-buttons-gap-width;
    background: none;
    color: $header-container-color-icon;

    svg{
      width:$header-container-svg-icon-width;
      height:$header-container-svg-icon-height;
      viewBox: 0 0 $header-container-svg-icon-width $header-container-svg-icon-height;
    }
    svg path {
      fill: $header-container-color-icon;
    }

    //#Search{
    //  fill: $header-container-color-icon;
    //}
    //#NewChat{
    //  fill: $header-container-color-icon;
    //}
  }
}
.header-dialogs{
  border: 1px solid $header-color-divider;
}