@include export-module('co-save-cancel-buttons-layout') {
  .co-save-cancel-buttons {
    font-family: $tp-save-cancel-buttons-font-family;
    font-size: $tp-save-cancel-buttons-font-size;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: $tp-save-cancel-buttons-z-index;
    .icon-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: $tp-save-cancel-buttons-button-size;
      width: $tp-save-cancel-buttons-button-size;
      .co-icon {
        pointer-events: all;
        cursor: pointer;
        height: $tp-save-cancel-buttons-icon-size;
        width: $tp-save-cancel-buttons-icon-size;
      }
    }
    .co-button {
      height: $tp-save-cancel-buttons-button-size;
      pointer-events: all;
      cursor: pointer;
      font-size: $tp-save-cancel-buttons-font-size;
      .co-icon {
        height: $tp-save-cancel-buttons-icon-size;
        width: $tp-save-cancel-buttons-icon-size;
      }
    }
    .save-cancel-buttons-wrapper {
      display: flex;
      border-radius: $tp-save-cancel-buttons-radius;
      background: $tp-save-cancel-buttons-background;
      column-gap: $tp-save-cancel-buttons-column-gap;
      padding: $tp-save-cancel-buttons-padding;
      &.movable {
        pointer-events: all;
      }
    }
    .save-button {
      padding: $tp-save-cancel-buttons-save-button-padding;
      border-style: $tp-save-cancel-buttons-save-button-border-style;
      border-width: $tp-save-cancel-buttons-save-button-border-width;
    }
    .cancel-button {
      padding: $tp-save-cancel-buttons-cancel-button-padding;
      border-style: $tp-save-cancel-buttons-cancel-button-border-style;
      border-width: $tp-save-cancel-buttons-cancel-button-border-width;
    }
  }
}