@import url('../../styles/variables.css');

.c-toolbar {
  display: flex;
  line-height: 3em;
  background: #fff;
  color: color(var(--primary-color) l(15%));
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);

  &.is-primary {
    background: var(--primary-color);
    color: #fff;
  }

  & > .c-toolbar__item {
    display: flex;

    & > a {
      display: block;
      color: inherit;
      padding: 0 1em;

      &:hover {
        background: rgba(0, 0, 0, 0.1);
        cursor: pointer;
      }

      &:active,
      &:focus {
        box-shadow: none;
        outline-offset: -0.12em;
      }
    }

    & > .c-button {
      background: none;
      height: 100%;
      font-size: inherit;
      border: none;
      border-radius: 0;
      color: inherit;

      &:hover {
        background: rgba(0, 0, 0, 0.1);
      }

      &:active,
      &:focus {
        box-shadow: none;
        outline: 1px solid;
        outline-offset: -1px;
      }
    }
  }

  & > .is-flex {
    flex: 1;
  }
}