////
/// @group tile-button
/// Button to be used within tile-grid. Used in combination with button component classes.
////

@use "sass:map";
@use "sass:meta";

@use "../selector";
@use "../element";
@use "../typography";
@use "../utils";
@use "../button";

$-fallbacks: (
  "border-radius" : (
    "function" : meta.get-function("get", false, "element"),
    "property" : "border-radius"
  ),
  "line-height" : (
    "function" : meta.get-function("get", false, "typography"),
    "property" : "line-height-densest"
  ),
  "transition-duration" : (
    "function" : meta.get-function("get", false, "button"),
    "property" : "transition-duration"
  ),
  "transition-properties" : (
    "function" : meta.get-function("get", false, "button"),
    "property" : "transition-properties"
  ),
  "transition-enabled" : (
    "function" : meta.get-function("get", false, "button"),
    "property" : "transition-enabled"
  ),
);

/// Module Settings
/// @type Map
/// @prop {Dimension} border-radius [true] The border radius of the tile button. If set to true, will use the element.scss property for "border-radius".
/// @prop {String} description-size [small-x] The type size of the description. This uses typography.scss, so the value of this options should be a variable from typography.scss.
/// @prop {Dimension} line-height [true] The line-height of the tile-button. If set to true, will use the typography.scss property for "line-height-densest".
/// @prop {Dimension} padding [(1em 0.5em)] The padding of the tile button
/// @prop {Dimension} row-margin [0.5em] The margin between rows.
/// @prop {Dimension} icon-font-size [1.5em] The font size of the icon.
/// @prop {Dimension} icon-margin [1em] The margin for the icon.
/// @prop {Number} icon-opacity [0.5] The opacity of the icon.

$config: (
  "border-radius" : true,
  "description-size" : "small-x",
  "line-height" : true,
  "padding" : (1em 0.5em),
  "row-margin" : 0.5em,
  "icon-font-size" : 1.5em,
  "icon-margin" : 1em,
  "icon-opacity" : 0.5,
  "transition-enabled" : true,
  "transition-duration" : true,
  "transition-properties" : true
) !default;

/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss
///   @include ulu.component-tile-button-set(( "property" : value ));

@mixin set($changes) {
  $config: map.merge($config, $changes) !global;
}

/// Get a config option
/// @param {Map} $name Name of property
/// @example scss
///   @include ulu.component-tile-button-get("property");

@function get($name) {
  $value: utils.require-map-get($config, $name, "component-tile-button [config]");
  @return utils.function-fallback($name, $value, $-fallbacks);
}

/// Prints component styles
/// @example scss
///  @include ulu.component-tile-button-styles();

@mixin styles {
  $prefix: selector.class("tile-button");

  #{ $prefix } {
    white-space: normal;
    margin: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: get("padding");
    border-radius: get("border-radius");
    line-height: get("line-height");
    @if get("transition-enabled") {
      transition-duration: get("transition-duration");
      transition-property: get("transition-properties");
    }
  }
  #{ $prefix }__row {
    
    & + & {
      margin-top: get("row-margin");
    }
  }

  $desc-size: get("description-size");

  @if ($desc-size and typography.has-size($desc-size)) {
    #{ $prefix }__row--description {
      @include typography.size($desc-size, $only-font-size: true);
    }
  }
  // Special row style for icons (optionally transparent)
  #{ $prefix }__row--icon {
    margin: 0 auto;
    opacity: get("icon-opacity");
    font-size: get("icon-font-size");
    & + #{ $prefix }__row {
      margin-top: get("icon-margin");
    }
  }
}