@include export-module('cc-default-confirm-cancel-buttons-layout') {
  .co-default-confirm-cancel-buttons {

    .default-confirm-cancel-buttons-wrapper {
      width: 100%;
      height: 40px;
      display: flex;
      margin-top: 25px;
      margin-bottom: 40px;
      justify-content: center;
      column-gap: 4px;

      co-button {
        height: auto;
        width: auto;
        background-color: $tp-default-background-accent;
        border-bottom: 2px solid $tp-color-border;
        cursor: pointer;

        &:not(.circle) {
          padding: 8px;
        }

        &.cancel-button {
          padding: 5px;
          co-icon {
            width: 22px;
            height: 22px;
            svg { // for fontawesome icons
              fill: $tp-color-dark-accent;
            }
            & [fill] { // for own icons
              fill: $tp-color-dark-accent;
            }
          }
        }
      }

      co-icon {
        width: 16px;
        height: 16px;
        svg { // for fontawesome icons
          fill: $tp-color-action;
        }
        & [fill] { // for own icons
          fill: $tp-color-action;
        }
      }
    }
  }
}
