/*
The header bar is used to display the title of the page and the buttons to add new items or to save the changes.
*/

.daexthefu-header-bar{

  background: $neutral-grey-0;
  box-shadow: $elevation-1;
  padding: 8px 32px;
  position: sticky;
  display: flex;
  gap: 16px;
  z-index: 700;
  height: 56px;
  align-items: center;
  justify-content: space-between;

  &__left{
    display: flex;
    gap: 16px;
    align-items: center;
  }

  &__right a{
    height: 22px;
    line-height: 22px;
    padding: 8px 16px;
    display: block;
  }

  &__page-title{
    font-size: $fs-7;
    line-height: 40px;
    height: 40px;
  }

  &__add-new-button{
    display: flex;
    align-items: center;
    gap: 6px;
  }

  &__add-new-button .untitled-ui-icon{
    width: 16px;
    height: 16px;
    margin: 2px 0 2px -2px;
  }

  &__add-new-button .untitled-ui-icon path{
    stroke: $neutral-grey-0;
  }

}

@media screen and (max-width: 782px){

  .daexthefu-header-bar{

    flex-direction: column;
    height: auto;

    &__left{
      width: 100%;
    }

    &__right{
      width: 100%;
    }

    .daexthefu-btn-primary{
      text-align: center;
    }

  }

}

@media screen and (max-width: 600px){

  .daexthefu-header-bar{

    &__left{
      justify-content: space-between;
    }

  }

}