@include export-module('cc-grid-toolbar-layout') {

  .co-grid-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: $cc-grid-toolbar-margin;
    padding: $cc-grid-toolbar-padding;
    border-style: $cc-grid-toolbar-border-style;
    border-width: $cc-grid-toolbar-border-width;
    border-radius: $cc-grid-toolbar-border-radius;
    .grid-toolbar-wrapper {
      display: flex;
      flex-direction: row;
      column-gap: 5px;
    }
    .co-icon {
      width: $cc-grid-toolbar-button-size;
      height: $cc-grid-toolbar-button-size;
      border-style: $cc-grid-toolbar-button-border-style;
      border-width: $cc-grid-toolbar-button-border-width;
      border-radius: $cc-grid-toolbar-button-border-radius;
      opacity: 1;
      cursor: pointer;
      &.disabled {
        cursor: default;
        opacity: 0.5;
      }
      svg { // for fontawesome icons
        height: 60%;
        width: 60%;
      }
    }
    &.right {
      justify-content: flex-end;
    }
  }
}
