/* stylelint-disable selector-class-pattern */
:local {
  .toolbar {
    background-color: #2481ca;
    display: flex;
    height: 2.5rem;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }

  .toolbar-toggle {
    align-items: center;
    border-right: 0.07143rem solid rgba(255, 255, 255, 0.17);
    box-shadow: inset -0.07143rem 0 0 0 rgba(0, 0, 0, 0.17);
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-start;
    position: relative;
    width: 3.0714em;

    // stylelint-disable-next-line
    & > * {
      width: 100%;
    }
  }

  .toolbar-body {
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
    max-height: 100%;
    min-width: 0;
    position: relative;
    width: 100%;
  }

  .toggle-button {
    color: #fff;
  }

  .toggle-button:hover {
    color: #fff;
  }

  .start {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-start;
    max-width: 50%;
    min-width: 18.571rem;
    position: relative;
  }

  .content {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
  }

  .end {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    max-width: 50%;
    padding-right: 0.7143rem;
    position: relative;
  }
}