.main-header {
  display: flex;
  align-items: center;
  height: $height-header;
  border-bottom: $separator;
  padding-left: $spacer-8;

  h1 {
    color: $primary-color;
    padding: $spacer-4 0;
    font-size: $font-size-extra-large;
  }

  .header-actions {
    display: flex;
    height: 100%;
    margin-left: auto;

    .header-action {
      display: flex;
      align-items: center;
      height: 100%;
      padding: 0 $spacer-5;
      border-left: $separator;
      color: $secondary-color;

      button {
        padding: $spacer-2;
        text-align: center;
        font-size: $font-size-medium;
      }

      &--circle {
        button {
          min-width: unset;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          color: $secondary-color;
          display: flex;
          align-items: center;
          justify-content: center;
          background: $gray-lighter;

          span {
            display: none;
          }
        }
      }
    }
  }
}